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

插件需求
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);

打包下载地址

赞 (0)

相关推荐

  • JQuery实现文字无缝滚动效果示例代码(Marquee插件)

    推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. 使用方法如下: 1.加载javascript. <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src=&quo

  • jquery实现marquee效果(文字或者图片的水平垂直滚动)

    jquery实现marquee效果(文字或者图片的水平垂直滚动)

    原本在前端html代码中,实现文字或者图片的水平垂直滚定,都是使用的marquee,但随着考虑浏览器的兼容性和符合为w3c的标准,后来想想那还是使用javascript代码来实现.后来又喜欢上了jquery,下面写的内容希望对初学者有些帮助,高手勿喷,但欢迎指导,感激不尽. 原理:无缝滚动的原理,就是利用两个内容相同的容器,来达到欺骗人的视觉的效果.然后通过整个大容器滚动条的左右或者上下的移动来实现滚动.下面附上一张手绘的图,来简要阐述下原理.首先,我们的目的是实现框1中的内容水平向左滚动(向右

  • jQuery实现模拟marquee标签效果

    Marquee 模仿IE下面的marquee效果,鼠标移上去暂停.形成环的主要原理在于每张图片一旦判断出了外面的显示窗口就添加到尾部,用append和prepend模拟数组的push()和shift(). 代码如下: HTML <!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta c

  • JQuery插件Marquee.js实现无缝滚动效果

    Marquee.js插件提供了许多属性选项,您可以配置定制外观和效果. { yScroll: "top" // 初始滚动方向 (还可以是"top" 或 "bottom") showSpeed: 850 // 初始下拉速度 scrollSpeed: 12 // 滚动速度 , pauseSpeed: 5000 // 滚动完到下一条的间隔时间 pauseOnHover: true // 鼠标滑向文字时是否停止滚动 loop: -1 // 设置循环滚动次

  • jQuery模拟Marquee实现无缝滚动效果完整实例

    本文实例讲述了jQuery模拟Marquee实现无缝滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>模拟Marquee无缝滚动</title> <style type="text/css"> /* CSS Document reset */ html, body, di

  • jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果

    jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果

    本文实例为大家分享了jquery.kxbdmarquee.js无缝滚动的具体代码,供大家参考,具体内容如下 strep1.页面引入相关文件 <script src="lib/jquery/jquery.js"></script> <script src="lib/jquery/jquery.kxbdmarquee.js"></script> step2.写html结构.css样式.js css样式: html结构: j

  • jquery xMarquee实现文字水平无缝滚动效果

    jquery xMarquee实现文字水平无缝滚动效果

     css 复制代码 代码如下: <style> .xMarquee{border:1px solid #ccc;height:25px;width:500px; margin:50px auto; background:#ffffff; overflow:hidden;} .xMarquee ol{list-style-type:none; margin:0px; padding:0px; font-size:12px; width:100000%;} .xMarquee ol li{floa

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

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

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

  • jquery插件制作 提示框插件实现代码

    我们首先来介绍自定义选择器的开发,他的代码结构如下: 复制代码 代码如下: (function ($) { $.expr[':'].customselector = function (object,index,properties,list) { //code }; })(jQuery); 调用时候的写法: $(a:customselector) 现在我们先解释下函数中所使用到的各个参数. object:当前dom元素的引用,而不是jquery对象.需要强调的一点,dom元素和jquery对象

  • 一个简单的jQuery插件制作 学习过程及实例

    一,首先,制作jQuery插件需要一个闭包 复制代码 代码如下: (function ($) { //code in here })(jQuery); 这是来自jQuery官方的插件开发规范要求,使用这种编写方式有什么好处呢? a) 避免全局依赖. b) 避免第三方破坏. c) 兼容jQuery操作符'$'和'jQuery ' 二,有了闭包,在其中加入插件的骨架 复制代码 代码如下: $.fn.dBox = function (options) { var defaults = { //各种属性

  • jquery简单插件制作(fn.extend)完整实例

    本文实例讲述了jquery简单插件制作方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=&qu

  • jQuery插件制作之参数用法实例分析

    本文实例讲述了jQuery插件制作之参数用法.分享给大家供大家参考.具体分析如下: 1.无参数实现文字阴影效果 jQuery.fn.shadow =function(){ return this.each(function(){ var $originalElement = jQuery(this); for(var i = 0;i < 5;i++){ $originalElement.clone() .css({ position :"absolute", left :$ori

  • jQuery拖拽排序插件制作拖拽排序效果(附源码下载)

    jQuery拖拽排序插件制作拖拽排序效果(附源码下载)

    使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件.效果图如下: 效果演示         源码下载 html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><

  • jQuery插件制作之全局函数用法实例

    本文实例讲述了jQuery插件制作之全局函数用法.分享给大家供大家参考.具体分析如下: 1.添加新的全局函数 所谓的全局函数,实际上就是jQuery对象的方法,但从实践的角度上看,他们是位于jQuery命名空间内部的函数 (1)添加一个函数,只需要将新函数指定为jQuery对象的一个属性. jQuery.five =function(){ alert("直接继承方式不一样"); } 调用: 复制代码 代码如下: $.five(); (2)添加多个函数 jQuery.five =func

  • jQuery插件制作的实例教程

    一.jQuery插件的类型 1. jQuery方法 很大一部分的jQuery插件都是这种类型,由于此类插件是将对象方法封装起来,在jQuery选择器获取jQuery对象过程中进行操作,从而发挥jQuery强大的选择器优势. 2. 全局函数法 可以把自定义的功能函数独立附加到jQuery命名空间下,从而作为jQuery作用域下的一个公共函数使用. 但全局函数没有被绑定到jQuery对象上,故不能在选择器获取的jQuery对象上调用.需要通过jQuery.fn()或$.fn()方式进行引用. 3.

  • 基础的WordPress插件制作教程

    插件制作准备工作 首先我们在\wp-content\plugins目录下添加一个文件夹叫做"My-Mood",在文件夹中添加一个叫做index.php的主文件,这个是插件的主文件,文件的开始需要一些命名的格式:如下面的代码 <!--?php <br ?--> /* Plugin Name: My Mood Plugin URI: http://www.aips.me Description: 一个心情发布插件 Version: 1.0 Author: 周良博客 Aut

  • 基于jQuery图片平滑连续滚动插件

    * 此插件要求运行在jQuery v1.3 或更高版本上 * 插件可以实现图片平滑向上或向左滚动 * 如果您需要更多的效果或在使用中本插件存在BUG,可以给在彦磊的博客上留言,彦磊将尽自己最大努力完善此插件 * 您留言前请先到:http://gmarwaha.com/jquery/jcarousellite/ 上面下载jcarousellite插件 * 来和彦磊图片平滑滚动的插件相互补充使用以获取更多的图片效果 * 彦磊图片平滑滚动插件只是对jcarousellite插件的补充 * * * 技术

随机推荐