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>
基于jQuery的公告无限循环滚动实现代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@