Announcement infinite loop scrolling implementation code based on jQuery_jquery

在线演示：http://demo.jb51.net/js/2012/callboard/
jQuery代码

复制代码 代码如下:

//第二版：Newton改造
(function (win){
var callboarTimer;
var callboard = $('#callboard');
var callboardUl = callboard.find('ul');
var callboardLi = callboard.find('li');
var liLen = callboard.find('li').length;
var initHeight = callboardLi.first().outerHeight(true);
win.autoAnimation = function (){
if (liLen <= 1) return;
var self = arguments.callee;
var callboardLiFirst = callboard.find('li').first();
callboardLiFirst.animate({
marginTop:-initHeight
}, 500, function (){
clearTimeout(callboarTimer);
callboardLiFirst.appendTo(callboardUl).css({marginTop:0});
callboarTimer = setTimeout(self, 5000);
});
}
callboard.mouseenter(
function (){
clearTimeout(callboarTimer);
}).mouseleave(function (){
callboarTimer = setTimeout(win.autoAnimation, 5000);
});
}(window));
setTimeout(window.autoAnimation, 5000);

HTML代码：

复制代码 代码如下:

• 
  公告：前端组主题正在整理中..有需要用的朋友请留个言，以方便及时通知！
  


• 
  公告：前端组上线一个月零八天，PR升为3，BD权重1
  

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

复制代码 代码如下:

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

完整演示代码：

复制代码 代码如下:

• 
  公告[2]：前端组上线一个月零八天，PR升为3，BD权重1
  


• 
  公告[3]：撤下了BloggerAds，原因为收入太少，打开速度慢！
  


• 
  公告[1]：前端组主题正在整理中..有需要用的朋友请留个言，以方便及时通知！
  

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn