博客主机
A-A+

JQuery向上滚动代码（简捷）

2014年10月19日 杂七杂八 暂无评论 阅读 228 次
博客主机

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 {height: 28px; overflow: hidden;}  
  2. .notice .notice_list li{line-height: 28px;}  
标签：
博客主机

给我留言