jQuery實現廣告條滾動效果

來源：懂視網責編：小OO 時間：2020-11-27 22:31:59

jQuery實現廣告條滾動效果

本文實例為大家分享了jQuery實現廣告條滾動效果的具體代碼，供大家參考，具體內容如下：<，每150毫秒執行一次函數 setInterval(function(){ if(scroll){$("#list li：first").animate( //第一個li開始執行動畫 {marginTop：marginTop--}.//設置上面的外邊距自減 0.function(){ //動畫之后執行的函數 if( -marginTop==$(this).height()+1){ //判斷li移動的距離是否超過自身的高度 var $f = $(this)；//復制一個li $(this).remove()；//把第一個移除。第一個移除之后，變成一個無縫連接 } } )；} }。

推薦度：

點擊下載本文 文檔為doc格式

導讀本文實例為大家分享了jQuery實現廣告條滾動效果的具體代碼，供大家參考，具體內容如下：<，每150毫秒執行一次函數 setInterval(function(){ if(scroll){$("#list li：first").animate( //第一個li開始執行動畫 {marginTop：marginTop--}.//設置上面的外邊距自減 0.function(){ //動畫之后執行的函數 if( -marginTop==$(this).height()+1){ //判斷li移動的距離是否超過自身的高度 var $f = $(this)；//復制一個li $(this).remove()；//把第一個移除。第一個移除之后，變成一個無縫連接 } } )；} }。

本文實例為大家分享了jQuery實現廣告條滾動效果的具體代碼，供大家參考，具體內容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 *{padding: 0px;margin: 0px;}
 #list{width: 150px;height: 310px;margin: 0px auto;border: 1px solid #ccc;overflow: hidden;}
 #list li{list-style: none;height: 30px;line-height: 30px;border-bottom: 1px dashed #999;}
 </style>
 <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
 <script>
 var marginTop = 0;//注意命名
 var scroll = true; 
 //定時函數，每150毫秒執行一次函數
 setInterval(function(){
 if(scroll){ 
 $("#list li:first").animate( //第一個li開始執行動畫
 {marginTop:marginTop--}, //設置上面的外邊距自減
 0,
 function(){ //動畫之后執行的函數

 if( -marginTop==$(this).height()+1){ //判斷li移動的距離是否超過自身的高度
 var $f = $(this); //復制一個li
 $(this).remove(); //把第一個移除。第一個移除之后，第二個就自動變為第一個
 marginTop=0;
 $f.css("margin-top","0px");
 $("ul").append($f); //把第一個追加加到列表的最后，變成一個無縫連接
 }
 }
 );
 }
 },150);
 $(function(){
 $("ul").hover(function(){scroll = false;},function(){scroll = true;});

 });
 </script>
 </head>
 <body>
 <div id="list">
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
 <li>10</li>
 <li>11</li>
 </ul>
 </div>
 </body>
</html>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

jQuery實現廣告條滾動效果

推薦度：

點擊下載本文 文檔為doc格式

標簽：實現滾動廣告

熱門焦點

jQuery實現廣告條滾動效果

jQuery實現廣告條滾動效果

jQuery實現廣告條滾動效果

最新推薦

猜你喜歡

熱門推薦