基于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 相关文章推荐
图片之间的切换
Jun 26 Javascript
extjs fckeditor集成代码
May 10 Javascript
javascript 图片上传预览-兼容标准
Jun 01 Javascript
jquery 输入框数字限制插件
Nov 10 Javascript
JavaScript 面向对象编程(1) 基础
May 18 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
细说Vue组件的服务器端渲染的过程
May 30 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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
js实现蒙版效果
2020/01/11 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
python编写爬虫小程序
2015/05/14 Python
Python每天必学之bytes字节
2016/01/28 Python
Python字符编码判断方法分析
2016/07/01 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
Python while true实现爬虫定时任务
2020/06/08 Python
python中怎么表示空值
2020/06/19 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
中专自我鉴定范文
2013/10/16 职场文书
11月红领巾广播稿
2014/01/17 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
撤诉书怎么写
2015/05/19 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python