jQuery实现无限循环滚动公告

开发 前端
如果有2条公告或以上就有个滚动效果,实例请移目前端组公告栏。在此感谢Newton同学的耐心指导,不多说了,上代码!

今天把博客的公告栏做了一个小效果,如果有2条公告或以上就有个滚动效果,实例请移目前端组公告栏。在此感谢Newton同学的耐心指导,不多说了,上代码!或者你可以直接前往DEMO看实例

jQuery代码

  1. //第二版:Newton改造  
  2.  (function (win){  
  3.      var callboarTimer;  
  4.      var callboard = $('#callboard');  
  5.      var callboardUl = callboard.find('ul');  
  6.      var callboardLi = callboard.find('li');  
  7.      var liLen = callboard.find('li').length;  
  8.      var initHeight = callboardLi.first().outerHeight(true);  
  9.    
  10.      win.autoAnimation = function (){  
  11.          if (liLen <= 1return;  
  12.          var self = arguments.callee;  
  13.          var callboardLiFirst = callboard.find('li').first();  
  14.          callboardLiFirst.animate({  
  15.              marginTop:-initHeight  
  16.          }, 500, function (){  
  17.              clearTimeout(callboarTimer);  
  18.              callboardLiFirst.appendTo(callboardUl).css({marginTop:0});  
  19.              callboarTimer = setTimeout(self, 5000);  
  20.          });  
  21.      }  
  22.    
  23.      callboard.mouseenter(  
  24.          function (){  
  25.              clearTimeout(callboarTimer);  
  26.          }).mouseleave(function (){  
  27.              callboarTimer = setTimeout(win.autoAnimation, 5000);  
  28.          });  
  29.  }(window));  
  30.  setTimeout(window.autoAnimation, 5000); 

HTML代码:

  1. <div id="callboard"> 
  2.  <ul> 
  3.      <li> 
  4.          <a href="http://www.qianduanzu.com/2012042036.html">公告:前端组主题正在整理中..有需要用的朋友请留个言,以方便及时通知!</a> 
  5.      </li> 
  6.      <li> 
  7.          <span style="color:red;">公告:前端组上线一个月零八天,PR升为3,BD权重1</span> 
  8.      </li> 
  9.  </ul> 

CSS代码:(可根据需求另设)

  1. #callboard { height:24px; line-height:24px; overflow:hidden;}  
  2. #callboard ul { padding:0;}  
  3. #callboard li { padding:0;} 

原文链接:http://www.cnblogs.com/qianduanzu/archive/2012/05/10/2493903.html

【编辑推荐】

  1. 支持同一页面多次使用的jQuery插件
  2. jQuery浮动留言板插件
  3. jQuery提供的获取元素位置的接口方法
  4. JQuery插件的开发真的有那么难吗
  5. 随机展示头像的jQuery代码
责任编辑:张伟 来源: 前端组的博客
相关推荐

2011-09-02 10:14:10

JQuery滚动Xslider

2020-06-15 18:00:36

transformbannerJavascript

2012-08-10 09:46:53

jQuery

2015-07-17 13:15:40

Swift版幻灯无限滚动

2011-09-02 10:03:40

jQuery滚动图片

2011-09-02 09:49:29

JQuery图片滚动

2011-08-15 11:23:41

iPhone开发循环滚动UIScrollVie

2010-03-11 14:15:24

Python循环

2024-06-20 08:42:45

2015-07-21 12:30:15

Swift轮播图无限循环

2011-09-01 13:17:46

JQuery滚动

2021-09-28 10:32:53

循环类型useEffect

2021-10-12 09:09:20

CSS 技巧文本循环滚动

2022-09-20 11:00:14

Vue3滚动组件

2021-04-01 08:05:01

React无限循环useEffect()

2021-06-17 14:46:50

框架jQuery开发

2024-01-22 09:28:23

CSS前端滚动驱动

2013-04-02 13:04:07

ListView平滑滚

2009-09-09 13:18:10

C# TextBox滚C# TextBox

2015-03-23 16:32:20

点赞
收藏

51CTO技术栈公众号