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

时间:2021-06-07 06:06:23

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

我先写个布局吧

<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标签里的内容根据项目需要进行修改,都是不影响效果的实现的,你可以加个图片或者图片文字都有的状态,例如

jquery轻松实现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了噢