JQuery插件Marquee.js实现无缝滚动效果
Marquee.js插件提供了许多属性选项,您可以配置定制外观和效果。
{ yScroll:"top"//初始滚动方向(还可以是"top"或"bottom") showSpeed:850//初始下拉速度 scrollSpeed:12//滚动速度, pauseSpeed:5000//滚动完到下一条的间隔时间 pauseOnHover:true//鼠标滑向文字时是否停止滚动 loop:-1//设置循环滚动次数(-1为无限循环) fxEasingShow:"swing"//缓冲效果 fxEasingScroll:"linear"//缓冲效果 cssShowing:"marquee-showing"//定义class// eventhandlers init:null//初始调用函数 beforeshow:null//滚动前回调函数 show:null//当新的滚动内容显示时回调函数 aftershow:null//滚动完了回调函数 }
详细代码:
<!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>marquee测试</title> <scripttype="text/javascript"src="../../jquery/jquery.js"></script> <scripttype="text/javascript"src="../marquee/lib/jquery.marquee.js"></script> <scripttype="text/javascript"> $(function(){ $("#marquee").marquee({ yScroll:"bottom", showSpeed:850,//初始下拉速度, scrollSpeed:12,//滚动速度, pauseSpeed:500,//滚动完到下一条的间隔时间, pauseOnHover:true,//鼠标滑向文字时是否停止滚动, loop:-1,//设置循环滚动次数(-1为无限循环), fxEasingShow:"swing",//缓冲效果, fxEasingScroll:"linear",//缓冲效果, cssShowing:"marquee-showing"//定义class }); }); </script> <style> ul.marquee{ display:block; line-height:1; position:relative; overflow:hidden; width:400px; height:22px; } ul.marqueeli{ position:absolute; top:-999em; left:0; display:block; white-space:nowrap; padding:3px5px; text-indent:0.8em } </style> </head> <body> <ulid="marquee"class="marquee"> <li><ahref="#"target="_blank">WEB前端开发</a>[2011-10-20]</li> <li><ahref="#"target="_blank">架构设计</a>[2011-09-20]</li> <li><ahref="#"target="_blank">系统运维</a>[2011-10-16]</li> </ul> </body> </html>
以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。