基于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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
Vue.js快速入门教程
Sep 07 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
JavaScript实现区块链
Mar 14 Javascript
浅谈React Event实现原理
Sep 20 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
javascript 精粹笔记
2010/05/09 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
js实现简易ATM功能
2020/10/27 Javascript
python实现自动更换ip的方法
2015/05/05 Python
python fabric使用笔记
2015/05/09 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
3种python调用其他脚本的方法
2020/01/06 Python
python连接PostgreSQL过程解析
2020/02/09 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
物业管理公司实习生自我鉴定
2013/09/19 职场文书
领导失职检讨书
2014/02/24 职场文书
围城读书笔记
2015/06/26 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python
MySQL 聚合函数排序
2021/07/16 MySQL
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis