jquery實現公告翻滾效果

更新時間：2015年02月27日 08:58:53 投稿：hebedich

本文給大家分享的是一則使用jQuery實現公告的翻滾效果的代碼，十分簡潔實用，兼容性也非常不錯，這里推薦給小伙伴們

翻滾效果非常不錯，代碼也很簡單，這里就不多廢話了。

//樣式文件：

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            .scrollNews {

                width: 100%;

                height: 20px;

                overflow: hidden;

                background: #FFFFFF;

                border: 0px solid #AAAAAA;

            }

            .scrollNews ul {

                padding: 2px 5px 5px 25px;

            }

            .scrollNews ul li {

                height: 20px;

                list-style-type: none;

                font-size: small;

            }

            a {

                text-decoration: none;

            }

        </style>

頭部js

別忘了導入jquery庫

復制代碼代碼如下:

$(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()方法的作用是觸發(fā)被選元素的制定事件類型

            });

jsp正文區(qū)

復制代碼代碼如下:

<div class="scrollNews">

　　<img width="20" height="15" src="img/laba.png" align="left">

        <ul>

            <li><a class="tooltip" title="查詢模塊菜單名稱更新公告：從2015-02-09開始,查詢模塊菜單使用新名稱,具體請參考下方【查詢模塊新舊名稱對照表】.">

            　　查詢模塊菜單名稱更新公告：從2015-02-09開始,查詢模塊菜單使用新名稱,具體請參考下方【查詢模塊新舊名稱對照表】.</a>

            </li>

            <li><a class="tooltip" title="查詢模塊菜單名稱更新公告：從2015-02-09開始,查詢模塊菜單使用新名稱,具體請參考下方【查詢模塊新舊名稱對照表】.">

            　　查詢模塊菜單名稱更新公告：從2015-02-09開始,查詢模塊菜單使用新名稱,具體請參考下方【查詢模塊新舊名稱對照表】.</a>

            </li>

         </ul>

 </div>

小伙伴們自由發(fā)揮下，應用到自己的項目中吧

您可能感興趣的文章: