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 相关文章推荐
jQuery 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
JS 去除Array中的null值示例代码
Nov 20 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
Javascript实现购物车功能的详细代码
May 08 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
node实现爬虫的几种简易方式
Aug 22 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
PHP句法规则详解 入门学习
2011/11/09 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
Javascript 获取LI里的内容
2008/12/17 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
Python类定义和类继承详解
2015/05/08 Python
详解Django中的过滤器
2015/07/16 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
为什么是 Python -m
2020/06/19 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
法国房车租赁网站:Yescapa
2019/08/26 全球购物
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
高校毕业生登记表自我鉴定
2013/11/03 职场文书
银行领导证婚词
2014/01/11 职场文书
实习指导老师评语
2014/04/26 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
交通安全教育主题班会
2015/08/12 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
mysql 子查询的使用
2022/04/28 MySQL