jquery轻松实现li标签上下滚动的原理

Posted 2020-07-07

在网站上我们常看到有滚动的文字或者图片，比如消息提醒，新闻列表，等等。那么这些效果是怎么形成的呢？经过查阅，找到一种十分方便的写法，经过改良，得出我自己的终极版滚动效果。

我先写个布局吧

<div class="scrollBox">
    <ul>
            <li>母鸡母鸡母鸡母鸡</li>
            <li>DUCKDUCKDUCK</li>
            <li>母鸡母鸡母鸡母鸡</li>
            <li>母鸡母鸡母鸡母鸡</li>
            <li>DUCKDUCKDUCK</li>
            <li>母鸡母鸡母鸡母鸡</li>
            <li>DUCKDUCKDUCK</li>
            <li>母鸡母鸡母鸡母鸡</li>
            <li>DUCKDUCKDUCK</li>              
     </ul>
</div>

正规且常见的布局。当然li标签里的内容根据项目需要进行修改，都是不影响效果的实现的，你可以加个图片或者图片文字都有的状态，例如

要想实现滚动，样式上需要注意以下几点

1.最外面的div要有具体的高度。

2.最外面的div必须加上overflow:hidden

3.因为是获取li标签的高度作为向上滚动的距离，所以li标签的样式里最好不要有padding或者margin，如果效果冲突的话可以在li标签里加个a标签，样式写在a标签里

下面是核心部分

<script>
        
    function autoScroll(obj){
    
        var n=$(obj).find("li").height();
        $(obj).find("ul").animate({
               marginTop:-n
    },500,function(){
         $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
    })
    
    $(function(){

       setInterval(‘autoScroll(".scrollBox")‘,3000)

    })
        
}

</script>

这样写代码的复用性比较强，在$(function(){})里面可以加入多条语句，从而实现页面多处滚动的效果。

 对了，千万不要在页面中引入jquery了噢