JQuery 插件制作实践 xMarquee插件V1.0
更新时间：2010年04月02日 00:07:15 作者：
今天要介绍的是实现类跑马灯效果的的广告插件。类似偶公司web-dev的同事在网站首页上做的目录广告播放器。其实很简单，LEVIN实际应用中也用到,所以稍作整理如下.
插件需求
1，向左或者右移动列表中的元素.(注，上下方向也一样的，用css控制列表元素float的方向即可～)
2，鼠标移动到某个元素上时，改元素突出显示(css控制)，播放器停止滚动。移开后继续跑马。。
3，可选左右手工导航按钮。
实现原理
移动列表末尾元素到第一个元素前面即可。
将来的扩展(以后用到的话再看吧)
多个元素同时移动；移动时的效果；移动后的回调函数；（注：利用移动后的回调函数可以方便做一个相册插件，有兴趣的自己写下）。做开发的人要记住一句话：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);
打包下载地址
1，向左或者右移动列表中的元素.(注，上下方向也一样的，用css控制列表元素float的方向即可～)
2，鼠标移动到某个元素上时，改元素突出显示(css控制)，播放器停止滚动。移开后继续跑马。。
3，可选左右手工导航按钮。
实现原理
移动列表末尾元素到第一个元素前面即可。
将来的扩展(以后用到的话再看吧)
多个元素同时移动；移动时的效果；移动后的回调函数；（注：利用移动后的回调函数可以方便做一个相册插件，有兴趣的自己写下）。做开发的人要记住一句话：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);
打包下载地址
相关文章
这篇文章主要介绍了Jquery Fade用法详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
这篇文章是基于jq技术实现左侧显示图片右侧文字滑动切换效果的相关资料，有需要的小伙伴可以来参考下2015-08-08
这篇文章主要介绍了jQuery ready方法实现原理详解的相关资料,需要的朋友可以参考下2016-10-10
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件HighCharts绘制2D带有Legend的饼图效果,结合实例形式分析了jQuery使用HighCharts绘制带明细显示的饼状图效果实现技巧,并附带了demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
Pinterest使用一种新的方式布局取得成功之后，们把他叫做瀑布流，国内现有美丽说，蘑菇街，花瓣等代表的网站接下来为你介绍一个juqery的插件masonry的使用，感兴趣的你可以参考下哈2013-03-03
今天写了一个放迅雷焦点广告的效果，还请大家多多指正，先附上效果图一张2008-11-11
这篇文章主要介绍了jQuery实现Email邮箱地址自动补全功能代码,涉及jQuery鼠标事件及字符操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
存储的是被拖动的图片的初始坐标，为两个变量设置被拖动图片的初始坐标，具体实现如下，感兴趣的朋友可以参考下哈2013-05-05
jQuery增加了并扩展了基本的事件处理机制，不但提供了更加优雅的事件处理语法，而且极大地增强了事件处理能力。本文将对此进行详细介绍，需要的朋友一起来看下吧2016-12-12
jquery同时选择两个id对象的时候，可以用add来实现。2010-10-10
最新评论