jQuery实现列表自动滚动循环滚动显示

 

页面中一个小区域循环滚动展示通知（公告、新闻、活动、图片等），并且鼠标hover时停止滚动并提示，鼠标离开后，继续滚动。

 

代码实现

 

html

 

<div id="news">

 

    <ul class="notices_box">

 

        <li class="notice">

 

            <a href="www.iguopin.com" target="_blank" title="1">1</a>

 

        </li>

 

        <li class="notice">

 

            <a href="www.iguopin.com" target="_blank" title="2">2</a>

 

        </li>

 

        <li class="notice">

 

            <a href="www.iguopin.com" target="_blank" title="3">3</a>

 

        </li>

 

    </ul>

 

</div>

 

css代码

 

#news {

 

    height: 340px;

 

    overflow: hidden;

 

}

 

.notices_box {

 

    margin-left: 20px;

 

    .notice {

 

        margin-bottom: 8px;

 

        list-style: disc;

 

        font-size: 16px;

 

        color: #e6a5ab;

 

        a {

 

            color: #000;

 

            text-overflow: -o-ellipsis-lastline;

 

            overflow: hidden;

 

            text-overflow: ellipsis;

 

            display: -webkit-box;

 

            line-height: 1.2;

 

            -webkit-line-clamp: 2;

 

            line-clamp: 2;

 

            -webkit-box-orient: vertical;

 

            &:hover {

 

                color: #c90808;

 

            }

 

        }

 

    }

 

}

 

JS代码

 

$（function （） {

 

    // 公告滚动

 

    var $this = $（"#news"）;

 

    var scrollTimer;

 

    $this.hover（function （） {

 

        clearInterval（scrollTimer）;

 

    }, function （） {

 

        scrollTimer = setInterval（function （） {

 

            scrollNews（$this）;

 

        }, 2000）;

 

    }）。trigger（"mouseleave"）;

 

}）;

 

// 公告滚动

 

function scrollNews（obj） {

 

    var $self = obj.find（"ul"）;

 

    var lineHeight = $self.find（"li:first"）。height（）;

 

    $self.animate（{

 

        "marginTop": -lineHeight + 'px'

 

    }, 600, function （） {

 

        $self.css（{

 

            marginTop: 0

 

        }）。find（"li:first"）。appendTo（$self）;

 

    }）

 

}

 

总结：主要是对hover、setInterval、clearInterval、animate这些方法以及marginTop属性（marginLeft、top、left等等）的理解和运用，需要注意的是，如果不加。trigger（"mouseleave"），在网页初始化的时候列表不会滚动，还有appendTo能直接移动元素，就这些了。