JQuery 插件制作实践 xMarquee插件V1.0


Posted in Javascript onApril 02, 2010

插件需求
1,向左或者右移动列表中的元素.(注,上下方向也一样的,用css控制列表元素float的方向即可~)
2,鼠标移动到某个元素上时,改元素突出显示(css控制),播放器停止滚动。移开后继续跑马。。
3,可选左右手工导航按钮。
JQuery 插件制作实践 xMarquee插件V1.0 
实现原理
移动列表末尾元素到第一个元素前面即可。
将来的扩展(以后用到的话再看吧)
多个元素同时移动;移动时的效果;移动后的回调函数;(注:利用移动后的回调函数可以方便做一个相册插件,有兴趣的自己写下)。做开发的人要记住一句话: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>

插件源码
; (function($) { 
// Private functions. 
var p = {}; 
p.stop = function(evt) { if (evt) { $(this).addClass(p._opts.on); }; window.clearInterval(p._intervalID); }; 
p.slide = function() { 
if (p._opts.dir == 1) { 
p._i.filter(":last").hide().fadeIn(p._opts.fadein).prependTo(p._t); 
} else { 
if (p._opts.vnum < p._cnt) { 
p._i.filter(":first").fadeOut(p._opts.fadeout).appendTo(p._t); 
p._i.filter(":eq(" + p._opts.vnum + ")").fadeIn(p._opts.fadein); 
} else { 
p._i.filter(":first").hide().appendTo(p._t).fadeIn(p._opts.fadein); 
}; 
}; 
//refresh 
p._i = $(p._opts.i, p._t); 
//visibility 
p._i.filter(":gt(" + (p._opts.vnum - 1) + ")").hide(); 
}; //slide 
p.go = function(evt) { 
p.stop(); 
if (evt) { 
$(this).removeClass(p._opts.on); 
}; 
p._intervalID = window.setInterval(function() { p.slide(); }, p._opts.interval); 
}; //go 
//main plugin body 
$.fn.xMarquee = function(options) { 
// Set the options. 
options = $.extend({}, $.fn.xMarquee.defaults, options); 
p._opts = options; 
// Go through the matched elements and return the jQuery object. 
return this.each(function() { 
//NOTE:if wanna support multiple marquee instance,we should cache private variable via $(this).data("v",v) 
p._t = this; //marquee target; 
//silde items 
p._i = $(p._opts.i, p._t); 
p._cnt = p._i.size(); 
p._intervalID = null; 
//hide unwanted items 
p._i.filter(":gt(" + (p._opts.vnum - 1) + ")").hide(); 
p._i.hover(p.stop, p.go); 
//buttons registeration 
$(p._opts.btn0).click(function(evt) { p._opts.dir = 0; p.stop(); p.slide(); return false; }).mouseout(p.go); 
$(p._opts.btn1).click(function(evt) { p._opts.dir = 1; p.stop(); p.slide(); return false; }).mouseout(p.go); 
//trigger the slidebox 
p.go(); 
}); 
}; 
// Public defaults. 
$.fn.xMarquee.defaults = { 
on: 'cur', 
i: 'li', //slide items css selector 
interval: 5000, 
fadein: 300, 
fadeout: 200, 
vnum: 4, //visible marquee items 
dir: 1, //marquee direaction.1=right;0=left; 
btn0: '.prev', //prev button 
btn1: '.next'//next button 
}; 
})(jQuery);

打包下载地址
Javascript 相关文章推荐
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
js实现模糊匹配功能
Feb 15 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
vue.js循环radio的实例
Nov 07 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 #Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 #Javascript
初试jQuery EasyUI 使用介绍
Apr 01 #Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 #Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 #Javascript
Jquery+JSon 无刷新分页实现代码
Apr 01 #Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 #Javascript
You might like
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
js对象基础实例分析
2015/01/13 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
js 作用域和变量详解
2017/02/16 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
详解Python多线程
2016/11/14 Python
基于python实现聊天室程序
2018/07/27 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
python requests使用socks5的例子
2019/07/25 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
python安装及变量名介绍详解
2020/12/12 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
大学生优秀的自我评价分享
2013/10/22 职场文书
应届生求职推荐信
2013/10/28 职场文书
会计岗位职责
2013/11/08 职场文书
学习两会精神心得范文
2014/03/17 职场文书
驾驶员安全责任书
2014/07/22 职场文书
社区文艺活动方案
2014/08/19 职场文书
客房领班岗位职责
2015/02/11 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
在 Python 中利用 Pool 进行多线程
2022/04/24 Python