×

jQuery无缝间歇向上滚动

作者:Terry2015.11.25来源:Web前端之家浏览:20216评论:0
关键词:HTMLjQuery

QQ图片20151125160834.jpg

在页面上看到过很多的滚动效果,比如向上、下、左、右滚动。不同的产品用到不同的效果,今天介绍下jQuery无缝间歇向上滚动的方法。不多说,干货拿起:

首先看HTML代码,如下:

<style type="text/css">
.renav{
    width:200px;
    height:150px;
    line-height:21px;
    overflow:hidden;
    background:#FFFFFF;
}
.renav li{
    height:21px;
}
</style>
<div class="renav">
    <ul style="margin-top: 0px;">
        <li><a>Web前端之家</a></li>
        <li><a>Web前端之家</a></li>
        <li><a>Web前端之家1</a></li>
        <li><a>Web前端之家2</a></li>
        <li><a>Web前端之家3</a></li>
        <li><a>Web前端之家4</a></li>
        <li><a>Web前端之家</a></li>
        <li><a>Web前端之家</a></li>
    </ul>
</div>

然后看下JS代码,如下:

$(function(){
    var $this = $(".renav");
    var scrollTimer;
    $this.hover(function(){
          clearInterval(scrollTimer);
     },function(){
       scrollTimer = setInterval(function(){
                     scrollNews( $this );
                }, 2000 );
    }).trigger("mouseout");
});
function scrollNews(obj){
   var $self = obj.find("ul:first");
   var lineHeight = $self.find("li:first").height();  
   $self.animate({ "margin-top" : -lineHeight +"px" },600 , function(){
         $self.css({"margin-top":"0px"}).find("li:first").appendTo($self);
   })
}

我们新建一个文件,然后把代码复制进去即可了,别忘了调用下jQuery库文件。这里特别要强调的,列表的内容高度要比我们外框架的高度要高,否则会出现闪动的问题。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/jQuery-scroll-up.html

网友评论文明上网理性发言 已有0人参与

发表评论: