本文實例為大家分享了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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
