当前位置:首页 > 网页特效 > 表格图层 >

底部工具条,支持动画关闭,Li列表滚动,jQuery版

时间:2014-06-09 08:24 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
  • 预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;在实际使用中,不会出现这样的问题。这款网页底部的工具栏基于jQuery版,可关闭,关闭时候还有动画效果呢,另外它还可以让文字滚动,一条一条的公告循环滚动,感觉真不错。
  • <script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script>
    <script type="text/javascript">
    (function($){
    $.fn.extend({
    Scroll:function(opt,callback){
    if(!opt) var opt={};
    var _this=this.eq(0).find("ul:first");
    var lineH=_this.find("li:first").height(),
    line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),
    speed=opt.speed?parseInt(opt.speed,10):7000,//卷动速度,数值越大,速度越慢(毫秒)
    timer=opt.timer?parseInt(opt.timer,10):7000;//滚动的时间间隔(毫秒)
    if(line==0) line=1;
    var upHeight=0-line*lineH;
    scrollUp=function(){
    _this.animate({
    marginTop:upHeight
    },speed,function(){
    for(i=1;i<=line;i++){
    _this.find("li:first").appendTo(_this);
    }
    _this.css({marginTop:0});
    });
    }
    _this.hover(function(){
    clearInterval(timerID);
    },function(){
    timerID=setInterval("scrollUp()",timer);
    }).mouseout();
    }
    })
    })(jQuery);
    $(document).ready(function(){
    $(".bulletin").Scroll({line:1,speed:1000,timer:5000});//修改此数字调整滚动时间
    });
    </script>
由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-biaoge/8634.html

表格图层下载排行

最新文章