Jquery消息滾動


又是一次作業練習,jquery消息滾動,效果圖如下:

源碼下載及效果預覽:https://www.jq22.com/jquery-info22971

代碼實現起來很簡單,所以看起來效果也是很不如人意,就當記錄一下子趴

推薦鏈接 

       無縫滾動:http://www.jq22.com/jquery-info22981

       推送滾動:http://www.jq22.com/jquery-info22468

現在來簡單寫一下自己的這個代碼實現

js代碼:

  $(function(){
                     //滾動事件,每兩秒滾動一次
                       var mun =setInterval(function(){
                          $("li:last").hide("slow").prependTo($("#file0")).slideDown();
                          },2000);
                     //鼠標懸停事件,懸停停止滾動,鼠標移出開始滾動
                     $("li").hover(function(){
                          clearInterval(mun);
                      },function(){
                         mun = setInterval(function(){
                               $("li:last").hide("slow").prependTo($("#file0")).slideDown();
                             },2000);
                      }
                     );

過一遍jq的方法和事件

定時器:

 setInterval() :按照指定的周期(以毫秒計)來調用函數或計算表達式。方法會不停地調用函數,直到 clearInterval() 被調用或窗口被關閉。

 setTimeout() :在指定的毫秒數后調用函數或計算表達式。

定時器是使用js的內容。詳情參考 https://www.runoob.com/w3cnote/js-timer.html

hide屬性:隱藏顯示的元素和它對應的是show屬性代碼中的slideDown可以替換成show(),都是動畫效果而已

prependTo屬性:把所有匹配的元素前置到另一個、指定的元素元素集合中。案例中是每隔一秒把最后一個li添加到ul中,

代碼太簡潔了不知道寫啥了QAQ

 

     


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM