最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

jQuery网页底部阴影浮动层文字滚动

来源:http://www.erdangjiade.com/ 二当家的 2016-02-01 19:05浏览(1571)

在活动专题页面上,经常会看到网页底部有广告悬浮层,而且内容是滚动的。本DEMO用了两个浮动层,一个是作阴影,另一个是文字向上滚动区域。用阴影层目的是不让字体有透明度,当然还有其他让字体不透明的方法。

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jQuery网页底部阴影浮动层文字滚动
分类:文字特效 > 文字滚动 难易:初级
查看演示 下载资源: 108

关注微信号获取此Demo视频教程:

下载资源 下载积分: 30 积分

阴影浮动层和文字滚动区域html代码

<div class="box_foot_shadow" id="box_foot_shadow"></div>
<div class="box_foot" id="box_foot">
    <div class="close"><a onclick="$('#box_foot_shadow,#box_foot').remove()"><img src="images/box_close.png" alt="关闭"/></a></div>
    <ul>
        <li><a href="http://www.erdangjiade.com/js/274.html">jQuery360度全景体验图</a></li>
        <li><a href="http://www.erdangjiade.com/js/275.html">jQuery-Easy-Background-Resize拉伸背景图</a></li>
        <li><a href="http://www.erdangjiade.com/js/276.html">jQuery仿搜狗响应式整屏切换效果</a></li>
        <li><a href="http://www.erdangjiade.com/js/277.html">php大文件断点下载</a></li>
        <li><a href="http://www.erdangjiade.com/js/278.html">js+flash实现打分效果</a></li>
        <li><a href="http://www.erdangjiade.com/js/279.html">jQuery手机倒计时验证</a></li>
        <li><a href="http://www.erdangjiade.com/js/280.html">jQuery boxy演示15种弹出层调用方法</a></li>
        <li><a href="http://www.erdangjiade.com/js/281.html">Full Screen Slider三种全屏鼠标滚动调用方法</a></li>
        <li><a href="http://www.erdangjiade.com/js/282.html">superslide仿京东首页幻灯片效果</a></li>
    </ul>
</div>

浮动层和阴影层CSS样式

.box_foot_shadow{height:70px;background-color: #000;opacity:0.3; filter:alpha(opacity=30); position: fixed;left:0;right:0;bottom:0;width:100%;z-index:9999} .box_foot{height:70px;line-height: 70px;font-size: 30px;color:#FFF;text-align: center; position: fixed;left:0;right:0;bottom:0;width:100%;z-index:9999;overflow: hidden} .box_foot .close img{position: absolute;right:20px;top:15px;}

引入jQuery滚动插件

<script type="text/javascript" src="js/srcoll_words.js"></script>

滚动插件设置

$("#box_foot").Scroll({
    line: 1, //滚动行数
    speed: 500, //速度
    timer: 4000 //间隔时间(毫秒)
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/729.html
评论0
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

1 2