列表上下无缝滚动

Posted Janfu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了列表上下无缝滚动相关的知识,希望对你有一定的参考价值。

var innerHeight = $(window).innerHeight(); 
$(".block").height(innerHeight - 190);
//设定高度

var Timeobj,			//储存定时器
      setDate_val=500,       //定时器轮播时间
      animateDate_val=100;    //列表轮播时间

var FunInt=function(){ 
        var blockHeight=$(‘.block‘).parent().innerHeight();
        if(blockHeight==0){ 
            blockHeight=$(‘.block‘).innerHeight();
        }
        var blockChildren_Number=$(‘.block‘).children().length;
        var blockChildren_Height=$(‘.block‘).children(‘li‘).eq(0).innerHeight();
        blockHeight=parseInt(blockHeight/blockChildren_Height)*blockChildren_Height;   
 //基于LI高度的倍数高度
        if(blockHeight<(blockChildren_Number*blockChildren_Height)){    
                $(‘.block‘).height(10000).parent().height(blockHeight).css({overflow:‘hidden‘});
                var marginTop=parseInt($(‘.block‘).css(‘margin-top‘));
                var nuberVal=(blockChildren_Number*blockChildren_Height)-blockHeight;
                nuberVal=-nuberVal;
                if(marginTop<0){ 
                    var kl_li_obj=$(‘.block‘).children().eq(0).clone(true);
                    $(‘.block‘).children().eq(0).remove();
                    $(‘.block‘).append(kl_li_obj);
                    $(‘.block‘).css({marginTop: marginTop+blockChildren_Height}, animateDate_val);
                }else{  
                    $(‘.block‘).animate({marginTop: marginTop-blockChildren_Height}, animateDate_val);
                }
        }
 };
Timeobj=setInterval(FunInt,setDate_val);
$(".block li").mouseenter(function(event) {
    clearInterval(Timeobj);
});
$(".block").mouseleave(function(event) {
    Timeobj=setInterval(FunInt,setDate_val);
});

  

以上是关于列表上下无缝滚动的主要内容,如果未能解决你的问题,请参考以下文章

怎么实现marquee标签的向上无缝滚动?

让table表头固定,tr超出指定条数后无缝上下循环滚动jquery效果代码

让table表头固定,tr超出指定条数后无缝上下循环滚动jquery效果代码

js文字的无缝滚动(上下)

marquee上下无缝滚动

jsjQuery实现文字上下无缝轮播滚动效果