首页>>Jquery文字>>文字无缝滚动效果代码(2018-09-27)

文字无缝滚动效果代码

 可以用于新闻公告等，鼠标经过暂停

文字无缝滚动效果代码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="box">  
  2.     <div class="bcon">  
  3.         <h1><b>News</b></h1>  
  4.         <!-- 代码开始 -->  
  5.         <div class="list_lh">  
  6.             <ul>  
  7.                 <li>  
  8.                     <p><a href="" target="_blank">1000000</a></p>  
  9.                     <p><a href="" target="_blank" class="a_blue">freejs.net</a><span>17:28:05</span></p>  
  10.                 </li>  
  11.                 <li>  
  12.                     <p><a href="" target="_blank">2000000</a></p>  
  13.                     <p><a href="" target="_blank" class="a_blue">freejs.net</a><span>17:28:05</span></p>  
  14.                 </li>  
  15.                 <li>  
  16.                     <p><a href="" target="_blank">3000000</a></p>  
  17.                     <p><a href="" target="_blank" class="a_blue">freejs.net</a><span>17:28:05</span></p>  
  18.                 </li>  
  19.                 <li>  
  20.                     <p><a href="" target="_blank">4000000</a></p>  
  21.                     <p><a href="" target="_blank" class="a_blue">freejs.net</a><span>17:28:05</span></p>  
  22.                 </li>  
  23.                 <li>  
  24.                     <p><a href="" target="_blank">5000000</a></p>  
  25.                     <p><a href="" target="_blank" class="a_blue">freejs.net</a><span>17:28:05</span></p>  
  26.                 </li>  
  27.                 <li>  
  28.                     <p><a href="" target="_blank">6000000</a></p>  
  29.                     <p><a href="" target="_blank" class="a_blue">freejs.net</a><span>17:28:05</span></p>  
  30.                 </li>  
  31.                 <li>  
  32.                     <p><a href="" target="_blank">7000000</a></p>  
  33.                     <p><a href="" target="_blank" class="a_blue">freejs.net</a><span>17:28:05</span></p>  
  34.                 </li>  
  35.                 <li>  
  36.                     <p><a href="" target="_blank">8000000</a></p>  
  37.                     <p><a href="" target="_blank" class="a_blue">freejs.net</a><span>17:28:05</span></p>  
  38.                 </li>  
  39.                 <li>  
  40.                     <p><a href="" target="_blank">9000000</a></p>  
  41.                     <p><a href="" target="_blank" class="a_blue">freejs.net</a><span>17:28:05</span></p>  
  42.                 </li>  
  43.                 <li>  
  44.                     <p><a href="" target="_blank">1000000</a></p>  
  45.                     <p><a href="" target="_blank" class="a_blue">freejs.net</a><span>17:28:05</span></p>  
  46.                 </li>  
  47.                 <li>  
  48.                     <p><a href="" target="_blank">1100000</a></p>  
  49.                     <p><a href="" target="_blank" class="a_blue">freejs.net</a><span>17:28:05</span></p>  
  50.                 </li>  
  51.                 <li>  
  52.                     <p><a href="" target="_blank">1200000</a></p>  
  53.                     <p><a href="" target="_blank" class="a_blue">freejs.net</a><span>17:28:05</span></p>  
  54.                 </li>  
  55.             </ul>  
  56.         </div>  
  57.         <!-- 代码结束 -->  
  58.     </div>  
  59.       
  60.       
  61.       
  62. </div>  

 

JavaScript Code
  1. // JavaScript Document  
  2. (function($){  
  3.     $.fn.myScroll = function(options){  
  4.     //默认配置  
  5.     var defaults = {  
  6.         speed:40,  //滚动速度,值越大速度越慢  
  7.         rowHeight:24 //每行的高度  
  8.     };  
  9.       
  10.     var opts = $.extend({}, defaults, options),intId = [];  
  11.       
  12.     function marquee(obj, step){  
  13.       
  14.         obj.find("ul").animate({  
  15.             marginTop: '-=1'  
  16.         },0,function(){  
  17.                 var s = Math.abs(parseInt($(this).css("margin-top")));  
  18.                 if(s >= step){  
  19.                     $(this).find("li").slice(0, 1).appendTo($(this));  
  20.                     $(this).css("margin-top", 0);  
  21.                 }  
  22.             });  
  23.         }  
  24.           
  25.         this.each(function(i){  
  26.             var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);  
  27.             intId[i] = setInterval(function(){  
  28.                 if(_this.find("ul").height()<=_this.height()){  
  29.                     clearInterval(intId[i]);  
  30.                 }else{  
  31.                     marquee(_this, sh);  
  32.                 }  
  33.             }, speed);  
  34.   
  35.             _this.hover(function(){  
  36.                 clearInterval(intId[i]);  
  37.             },function(){  
  38.                 intId[i] = setInterval(function(){  
  39.                     if(_this.find("ul").height()<=_this.height()){  
  40.                         clearInterval(intId[i]);  
  41.                     }else{  
  42.                         marquee(_this, sh);  
  43.                     }  
  44.                 }, speed);  
  45.             });  
  46.           
  47.         });  
  48.   
  49.     }  
  50.   
  51. })(jQuery);  

 


原文地址:http://www.freejs.net/article_jquerywenzi_696.html