JQuery向上滚动代码(简捷)

作者: Cpder 分类: 杂七杂八 发布时间: 2014-10-19 15:17

JQuery向上滚动代码如下:

  1. //向上滚动代码  
  2. function startmarquee(elementID,h,n,speed,delay){  
  3.     var t = null;  
  4.     var box = ‘#’ + elementID;  
  5.     $(box).hover(function(){  
  6.         clearInterval(t);  
  7.     }, function(){  
  8.         t = setInterval(start,delay);  
  9.     }).trigger(‘mouseout’);  
  10.     function start(){  
  11.         $(box).children(‘ul:first’).animate({marginTop: ‘-=’+h},speed,function(){  
  12.             $(this).css({marginTop:’0′}).find(‘li’).slice(0,n).appendTo(this);  
  13.         })  
  14.     }  
  15. }  

示例代码如下:

  1. <div id=“notice” class=“notice_list”>  
  2.     <ul style=“margin-top: 0”><!–实现多条上下滚动效果–>  
  3.         <li>EDA中国新版上线了!欢迎来拍!!!</li>  
  4.         <li><a href=“#”>中国热烈欢迎大家前来投稿!</a></li>  
  5.     </ul>  
  6. </div>  
  7. <script type=“text/javascript”>$(function(){ startmarquee(‘notice’,28,1,500,3000);});</script>  

CSS如下:

  1. .notice .notice_list {height28pxoverflowhidden;}  
  2. .notice .notice_list li{line-height28px;}  

Leave a Reply

Your email address will not be published. Required fields are marked *

Optimized by WPJAM Basic