JQuery最佳实践-xMarquee插件V1.0
今天要介绍的是实现类跑马灯效果的的广告插件。类似偶公司web-dev的同事在网站首页上做的目录广告播放器。其实很简单,LEVIN实际应用中也用到,所以稍作整理如下.
插件需求
1,向左或者右移动列表中的元素.(注,上下方向也一样的,用css控制列表元素float的方向即可~)
2,鼠标移动到某个元素上时,改元素突出显示(css控制),播放器停止滚动。移开后继续跑马。。
3,可选左右手工导航按钮。
目前在线示例:m18.com首页
实现原理
移动列表末尾元素到第一个元素前面即可。
将来的扩展(以后用到的话再看吧)
多个元素同时移动;移动时的效果;移动后的回调函数;(注:利用移动后的回调函数可以方便做一个相册插件,有兴趣的自己写下)。做开发的人要记住一句话:Do the simplest thing that could possibly work!做最简单可用的东东,千万别过分设计。
xMarquee API说明
1,dom规约
看下面源码处~
2,css示例
看下面源码处~
3,主方法调用
<script type="text/javascript"> //<![CDATA[ $("#wk_featured_items").xMarquee({}); //]]> </script>
插件源码
1,在线查看
2,下载CC