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

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 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 //间隔时间（毫秒）
});