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 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
JavaScript继承的三种方法实例
May 12 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闭包函数传参及使用外部变量的方法
2016/03/15 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
php unlink()函数使用教程
2018/07/12 PHP
JavaScript null和undefined区别分析
2009/10/14 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
极简的Python入门指引
2015/04/01 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
MySQL面试题目集锦
2016/04/14 面试题
经典商业广告词
2014/03/13 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS