JQuery最佳实践-xMarquee插件V1.0

今天要介绍的是实现类跑马灯效果的的广告插件。类似偶公司web-dev的同事在网站首页上做的目录广告播放器。其实很简单,LEVIN实际应用中也用到,所以稍作整理如下.

插件需求

1,向左或者右移动列表中的元素.(注,上下方向也一样的,用css控制列表元素float的方向即可~)

2,鼠标移动到某个元素上时,改元素突出显示(css控制),播放器停止滚动。移开后继续跑马。。

3,可选左右手工导航按钮。

目前在线示例:m18.com首页

jquery_xmarquee_m18

实现原理

移动列表末尾元素到第一个元素前面即可。

将来的扩展(以后用到的话再看吧)

多个元素同时移动;移动时的效果;移动后的回调函数;(注:利用移动后的回调函数可以方便做一个相册插件,有兴趣的自己写下)。做开发的人要记住一句话: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,在线查看

http://code.google.com/p/mamboer/source/browse/branches/Vivasky.Labs/src/JQPlugins/assets/js/jquery.xMarquee.js

http://code.google.com/p/mamboer/source/browse/branches/Vivasky.Labs/src/JQPlugins/assets/css/jquery.xMarquee.css

2,下载CC

http://www.vivasky.com/tools.aspx

源码中包含完整demo

posted @ 2010-04-01 16:47  Mamboer  阅读(505)  评论(0编辑  收藏  举报