【JAVASCRIPT】jquery實現新聞滾動效果

前台框架如下：

            <h3>最新新聞</h3>
            <div class="scrollNews" >
                <ul>
                    <li><a href="#" class="tooltip" title="甜美寬松毛衣今秋一定紅.">甜美寬松毛衣今秋一定紅.</a></li>
                    <li><a href="#" class="tooltip" title="秋裝百搭小馬甲不到50元.">秋裝百搭小馬甲不到50元.</a></li>
                    <li><a href="#" class="tooltip" title="修身韓版小西裝萬人瘋搶.">修身韓版小西裝萬人瘋搶.</a></li>
                    <li><a href="#" class="tooltip" title="夏末雪紡店主含淚大甩賣.">夏末雪紡店主含淚大甩賣.</a></li>
                    <li><a href="#" class="tooltip" title="瑞麗都瘋狂推薦的秋裝.">瑞麗都瘋狂推薦的秋裝.</a></li>
                    <li><a href="#" class="tooltip" title="48元長款針織小開衫賣瘋啦.">48元長款針織小開衫賣瘋啦.</a></li>
                    <li><a href="#" class="tooltip" title="長袖雪紡衫單穿內搭都超美.">長袖雪紡衫單穿內搭都超美.</a></li>
                </ul>
            </div>

CSS定義如下：

        <style type="text/css">
            *{ margin:0; padding:0;}        
            .scrollNews{width:256px;height:85px;overflow:hidden;background:#FFFFFF;border: 1px solid #AAAAAA;}
            .scrollNews ul{padding:10px 0 5px 15px;}
            .scrollNews ul li{ height:20px;list-style-type:none; font-size:small;}
            a{text-decoration:none;}
        </style>

這里需要注意的是*{ margin:0; padding:0;} 的使用。margin：設置外邊距。padding：設置內邊距。如果不使用此屬性，在后面寫JS代碼時會破壞頁面，因為div中有默認的內外邊距；

JAVASCRIPT代碼如下：

    <script type="text/javascript">
        $(function () {
            var settime;
            $(".scrollNews").hover(function () {
                clearInterval(settime);
            }, function () {
                settime = setInterval(function () {
                    var $first = $(".scrollNews ul:first");     //選取div下的第一個ul 而不是li；
                    var height = $first.find("li:first").height();      //獲取第一個li的高度，為ul向上移動做准備；
                    $first.animate({ "marginTop": -height + "px" }, 600, function () {
                        $first.css({ marginTop: 0 }).find("li:first").appendTo($first); //設置上邊距為零，為了下一次移動做准備
                    });
                }, 3000);
            }).trigger("mouseleave");       //trigger()方法的作用是觸發被選元素的制定事件類型
        });
    </script>

在寫JS代碼之前不要忘記引入jquery-1.4.2.js；