码迷,mamicode.com
首页 > Web开发 > 详细

scroll.js

时间:2017-11-17 23:27:29      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:速度   interval   this   jquer   height   clear   var   def   默认   

基于jquery的无缝平滑滚动插件

(function($){
    $.fn.myScroll = function(options){
    //默认配置
    var defaults = {
        speed:40,  //滚动速度,值越大速度越慢
        rowHeight:24 //每行的高度
    };
    
    var opts = $.extend({}, defaults, options),intId = [];
    
    function marquee(obj, step){
    
        obj.find("ul").animate({
            marginTop: ‘-=1‘
        },0,function(){
                var s = Math.abs(parseInt($(this).css("margin-top")));
                if(s >= step){
                    $(this).find("li").slice(0, 1).appendTo($(this));
                    $(this).css("margin-top", 0);
                }
            });
        }
        
        this.each(function(i){
            var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
            intId[i] = setInterval(function(){
                if(_this.find("ul").height()<=_this.height()){
                    clearInterval(intId[i]);
                }else{
                    marquee(_this, sh);
                }
            }, speed);

            _this.hover(function(){
                clearInterval(intId[i]);
            },function(){
                intId[i] = setInterval(function(){
                    if(_this.find("ul").height()<=_this.height()){
                        clearInterval(intId[i]);
                    }else{
                        marquee(_this, sh);
                    }
                }, speed);
            });       
        });
    }
})(jQuery);

使用方法

先引入jquery类库,后初始化插件参数,不设置即为默认值

$(‘#scroll‘).myScroll({
    speed:40,  //滚动速度,值越大速度越慢
    rowHeight:24 //每行的高度
})

注:以上为垂直滚动,如需水平滚动请修改相应参数("rowHeight"/"margin-top")

scroll.js

标签:速度   interval   this   jquer   height   clear   var   def   默认   

原文地址:http://www.cnblogs.com/yxrs/p/7853849.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!