基于jQuery的公告无限循环滚动实现代码


Posted in Javascript onMay 11, 2012

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

CSS代码:(可根据需求另设)
#callboard { height:24px; line-height:24px; overflow:hidden;} 
#callboard ul { padding:0;} 
#callboard li { padding:0;}

完整演示代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>滚动公告栏</title> 
<style type="text/css"> 
header, nav, aside, menu, figure, article, footer { display:block; } 
body, div, form, textarea, label, input, ul, ol, li, dl, dt, dd, p, span, a, img, h1, h2, h3, h4, h5, h6, tbody, tfoot, tr, th, td, pre, code, form, fieldset, legend, font { margin:0; padding:0; } 
table { border-collapse:collapse; border-spacing:0; } 
caption, th { text-align:left; } 
sup { vertical-align:text-top; } 
sub { vertical-align:text-bottom; } 
li { list-style:none; } 
fieldset, img { border:none; } 
input, textarea, select { font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; 
color:inherit; _color:#333; *color:#333; 
outline:none; } 
/*BASE CLASS*/ 
.cfix { *display:inline-block;*zoom:1} 
.cfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } 
/*公告栏滚动CSS*/ 
#callboard { width:600px; margin:100px auto 0; height:24px; line-height:24px; overflow:hidden; font-size:12px; background-color:#f5f5f5;} 
#callboard ul { padding:0; } 
#callboard li { padding:0; } 
</style> 
<script type="text/javascript" src="http://demo.3water.com/jslib/jquery/jquery-1.7.2.min.js"></script> 
</head> 
<body> 
<div id="callboard"> 
<ul> 
<li> 
<span style="color:red;">公告[2]:前端组上线一个月零八天,PR升为3,BD权重1</span> 
</li> 
<li> 
<span style="color:red;">公告[3]:撤下了BloggerAds,原因为收入太少,打开速度慢!</span> 
</li> 
<li style="margin-top: 0px;"> 
<a href="https://3water.com">公告[1]:前端组主题正在整理中..有需要用的朋友请留个言,以方便及时通知!</a> 
</li> 
</ul> 
</div> 
<!--公告板滚动--> 
<script type="text/javascript"> 
(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); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
JS小框架 fly javascript framework
Nov 26 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
js断点调试经验分享
Dec 08 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 #Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 #Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 #Javascript
jQuery 过滤not()与filter()实例代码
May 10 #Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 #Javascript
javascript 在firebug调试时用console.log的方法
May 10 #Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 #Javascript
You might like
php2html php生成静态页函数
2008/12/08 PHP
php数组一对一替换实现代码
2012/08/31 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
js加解密 脚本解密
2008/02/22 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
python中map、any、all函数用法分析
2015/04/21 Python
python提取页面内url列表的方法
2015/05/25 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
Python中如何导入类示例详解
2019/04/17 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
坚定理想信念心得体会
2014/03/11 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
企业宣传标语
2014/06/09 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
白酒代理协议书范本
2014/10/26 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
2015年国庆节寄语
2015/08/17 职场文书
基于python实现银行管理系统
2021/04/20 Python
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python