jQuery 多功能无缝滚动显示插件

作者: Arvin Chen 分类: Jquery 来源: Break易站(www.breakyizhan.com)

Jquery多功能滚动显示的参数描述如下:

/***
 @description 基于 jQuery 多功能无缝滚动显示插件
 @params auto: true                     # 是否自动滚动
         interval: 3000                 # 间隔时间(毫秒)
         direction: 'forward'           # 向前 -  forward / 向后 - backward
         speed: 500                     # 移动速度(毫秒)
         showNum: 1                     # 显示个数
         stepLen: 1                     # 每次滚动步长
         type: 'horizontal'             # 水平滚动 - horizontal / 垂直滚动 - vertical
         prevElement: null              # 上一组按钮元素
         prevBefore: function() {}      # 上一组移动前回调
         prevAfter: function() {}       # 上一组移动后回调
         nextElement: null              # 下一组按钮元素
         nextBefore: function() {}      # 下一组移动前回调
         nextAfter: function() {}       # 下一组移动后回调
         pauseElement: null             # 暂停按钮元素
         pauseBefore: function() {}     # 暂停前回调
         pauseAfter: function() {}      # 暂停后回调
         resumeElement: null            # 继续按钮元素
         resumeBefore: function() {}    # 继续前回调
         resumeAfter: function() {}     # 继续后回调
***/

核心的JS代码如下:

 
$(function() {
$('.mod').each(function() {
var _this = $(this),
code = $.trim($('.demo', _this).html()).replace(/textarea>/, 'textarea>');
$('.code', _this).prepend($('<textarea>' + code + '</textarea>'));
});

$('.mod_ft').each(function() {
$('<div class="to_top"><a href="#mod_header" title="返回顶部">返回顶部</a></div>').appendTo($(this));
});


$('a[href*=#]').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({
scrollTop : targetOffset
}, 1000);
return false;
}
}
});
})
!function(a) {
var b;
b = function() {
function b(b, c) {
this.elements = {
wrap: b,
ul: b.children(),
li: b.children().children()
},
this.settings = a.extend({},
a.fn.marquee.defaults, c),
this.cache = {
allowMarquee: !0
}
}
return b.prototype.init = function() {
this.setStyle(),
this.move(),
this.bind()
},
b.prototype.setStyle = function() {
var a, b, c, d, e, f, g, h;
switch (d = this.elements.li.outerWidth(!0), c = this.elements.li.outerHeight(!0), b = Math.max(parseInt(this.elements.li.css("margin-top"), 10), parseInt(this.elements.li.css("margin-bottom"), 10)), this.settings.type) {
case "horizontal":
h = this.settings.showNum * d,
g = c,
f = 9999,
e = "auto",
a = "left",
this.cache.stepW = this.settings.stepLen * d,
this.cache.prevAnimateObj = {
left: -this.cache.stepW
},
this.cache.nextAnimateObj = {
left: 0
},
this.cache.leftOrTop = "left";
break;
case "vertical":
h = d,
g = this.settings.showNum * c - b,
f = "auto",
e = 9999,
a = "none",
this.cache.stepW = this.settings.stepLen * c - b,
this.cache.prevAnimateObj = {
top: -this.cache.stepW
},
this.cache.nextAnimateObj = {
top: 0
},
this.cache.leftOrTop = "top"
}
this.elements.wrap.css({
position: "relative",
width: h,
height: g,
overflow: "hidden"
}),
this.elements.ul.css({
position: "relative",
width: f,
height: e
}),
this.elements.li.css({
"float": a
})
},
b.prototype.bind = function() {
var a, b, c, d, e, f;
f = this,
null != (a = this.settings.prevElement) && a.click(function(a) {
a.preventDefault(),
f.prev()
}),
null != (b = this.settings.nextElement) && b.click(function(a) {
a.preventDefault(),
f.next()
}),
null != (c = this.settings.pauseElement) && c.click(function(a) {
a.preventDefault(),
f.pause()
}),
null != (d = this.settings.resumeElement) && d.click(function(a) {
a.preventDefault(),
f.resume()
}),
null != (e = this.elements.wrap) && e.hover(function() {
f.pause()
},
function() {
f.resume()
})
},
b.prototype.move = function() {
var a, b, c;
if (c = this, this.settings.auto) {
switch (this.settings.direction) {
case "forward":
b = c.prev;
break;
case "backward":
b = c.next
}
a = c.settings.interval,
setTimeout(function() {
b.call(c),
setTimeout(arguments.callee, a)
},
a),
this.cache.moveBefore = this.cache.moveAfter = function() {
return null
}
} else this.cache.moveBefore = function() {
return c.cache.allowMarquee = !1
},
this.cache.moveAfter = function() {
return c.cache.allowMarquee = !0
}
},
b.prototype.prev = function() {
var a, b, c;
c = this,
this.cache.allowMarquee && (this.cache.moveBefore.call(this), this.settings.prevBefore.call(this), b = this.elements.ul, a = b.children().slice(0, this.settings.stepLen), a.clone().appendTo(b), b.animate(this.cache.prevAnimateObj, this.settings.speed,
function() {
b.css(c.cache.leftOrTop, 0),
a.remove(),
c.cache.moveAfter.call(c),
c.settings.prevAfter.call(c)
}))
},
b.prototype.next = function() {
var a, b, c;
c = this,
this.cache.allowMarquee && (this.cache.moveBefore.call(this), this.settings.nextBefore.call(this), b = this.elements.ul, a = b.children().slice( - this.settings.stepLen), a.clone().prependTo(b), b.css(c.cache.leftOrTop, -this.cache.stepW).animate(this.cache.nextAnimateObj, this.settings.speed,
function() {
a.remove(),
c.cache.moveAfter.call(c),
c.settings.nextAfter.call(c)
}))
},
b.prototype.pause = function() {
this.settings.pauseBefore.call(this),
this.cache.allowMarquee = !1,
this.settings.pauseAfter.call(this)
},
b.prototype.resume = function() {
this.settings.resumeBefore.call(this),
this.cache.allowMarquee = !0,
this.settings.resumeAfter.call(this)
},
b
} (),
a.fn.marquee = function(c) {
this.each(function() {
var d;
d = new b(a(this), c),
d.init()
})
},
a.fn.marquee.defaults = {
auto: !0,
interval: 3e3,
direction: "forward",
speed: 500,
showNum: 1,
stepLen: 1,
type: "horizontal",
prevElement: null,
prevBefore: function() {},
prevAfter: function() {},
nextElement: null,
nextBefore: function() {},
nextAfter: function() {},
pauseElement: null,
pauseBefore: function() {},
pauseAfter: function() {},
resumeElement: null,
resumeBefore: function() {},
resumeAfter: function() {}
}
} (jQuery);

CSS文件如下:

 * {margin:0;padding:0;}
body{font:12px/1.4 SimSun,Arial,Helvetica,sans-serif;color:#333;}
strong{font-weight:700;}
:focus{outline:0;}
#mod_header,#mod_main,#mod_footer{width:1000px;margin:0 auto 20px;}
#mod_footer{margin:0 auto;padding-bottom:20px;font-family:Arial;}
#mod_header h1{font:700 22px/2 'Microsoft YaHei';text-align:center;}
#desc pre{font:13px/15px 'Lucida Console',Arial;color:#7F9F7F;}
.mod{border-bottom:5px dashed #f00;margin-bottom:10px;padding-bottom:10px;}
.mod_hd{}
.mod_hd h2{margin-bottom:10px;padding:0 20px;font:700 16px/2 'Microsoft YaHei',SimSun;color:#fff;background:#104778;text-shadow:1px 1px 1px #8DB2E3;}
.mod_bd{}
.mod_ft strong{display:block;margin-bottom:5px;}
.mod_ft ul{margin-bottom:10px;}
.mod_ft li{list-style:disc inside none;line-height:20px;}
.demo,.code{margin-bottom:10px;}
.code textarea{margin:0;border:0 none;padding:0;width:100%;height:150px;font:12px/1.4 'Lucida Console',Arial;background:#ddd;resize:none;}
.to_top{text-align:right;}
.to_top a{text-decoration:none;}
#mod_footer{text-align:center;}

.wrap,.box{margin-bottom:10px;}
.wrap ul,.wrap .ul{overflow:hidden;clear:both;*zoom:1;}
.wrap li,.wrap .li{list-style:none;width:120px;height:80px;padding:5px;background:#ccc;margin:2px 5px 10px 5px;font:700 30px/80px Arial;text-align:center;}

jQuery 多功能无缝滚动显示插件:不带任何参数(默认参数)


<div id="module_a" class="mod">
<div class="mod_hd">
<h2>jQuery 多功能无缝滚动显示插件:不带任何参数(默认参数)</h2>
</div>
<div class="mod_bd">
<div class="demo">
<div id="wrap1" class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$('#wrap1').marquee();
})
</script>
</div>
<div class="code"></div>
</div>
<div class="mod_ft"></div>
</div>

jQuery 多功能无缝滚动显示插件:DOM 结构不用 ul,li


<div id="module_b" class="mod">
<div class="mod_hd">
<h2>jQuery 多功能无缝滚动显示插件:DOM 结构不用 ul&gt;li</h2>
</div>
<div class="mod_bd">
<div class="demo">
<div id="wrap2" class="wrap">
<div class="ul">
<div class="li">1</div>
<div class="li">2</div>
<div class="li">3</div>
<div class="li">4</div>
<div class="li">5</div>
<div class="li">6</div>
<div class="li">7</div>
<div class="li">8</div>
<div class="li">9</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#wrap2').marquee();
})
</script>
</div>
<div class="code"></div>
</div>
<div class="mod_ft"></div>
</div>

jQuery 多功能无缝滚动显示插件:自动滚动


<div id="module_c" class="mod">
<div class="mod_hd">
<h2>jQuery 多功能无缝滚动显示插件:自动滚动</h2>
</div>
<div class="mod_bd">
<div class="demo">
<div id="wrap3" class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$('#wrap3').marquee({
auto: true,
interval: 3000,
speed: 500,
showNum: 5,
stepLen: 5
});
})
</script>
</div>
<div class="code"></div>
</div>
<div class="mod_ft"></div>
</div>

jQuery 多功能无缝滚动显示插件:手动滚动


<div id="module_d" class="mod">
<div class="mod_hd">
<h2>jQuery 多功能无缝滚动显示插件:手动滚动</h2>
</div>
<div class="mod_bd">
<div class="demo">
<div id="wrap4" class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<input type="button" value="上一组" id="prev4" />
<input type="button" value="下一组" id="next4" />
<script type="text/javascript">
$(function() {
$('#wrap4').marquee({
auto: false,
speed: 1000,
showNum: 4,
stepLen: 4,
prevElement: $('#prev4'),
nextElement: $('#next4')
});
})
</script>
</div>
<div class="code"></div>
</div>
<div class="mod_ft"></div>
</div>

jQuery 多功能无缝滚动显示插件:暂停/继续滚动


<div id="module_e" class="mod">
<div class="mod_hd">
<h2>jQuery 多功能无缝滚动显示插件:暂停/继续滚动</h2>
</div>
<div class="mod_bd">
<div class="demo">
<div id="wrap5" class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<input type="button" value="暂停" id="pause5" />
<input type="button" value="继续" id="resume5" />
<script type="text/javascript">
$(function() {
$('#wrap5').marquee({
auto: true,
interval: 1000,
showNum: 4,
stepLen: 4,
pauseElement: $('#pause5'),
resumeElement: $('#resume5')
});
})
</script>
</div>
<div class="code"></div>
</div>
<div class="mod_ft"></div>
</div>

jQuery 多功能无缝滚动显示插件:向右滚动


<div id="module_f" class="mod">
<div class="mod_hd">
<h2>jQuery 多功能无缝滚动显示插件:向右滚动</h2>
</div>
<div class="mod_bd">
<div class="demo">
<div id="wrap6" class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$('#wrap6').marquee({
auto: true,
interval: 2000,
speed: 800,
showNum: 6,
stepLen: 6,
direction: 'backward'
});
})
</script>
</div>
<div class="code"></div>
</div>
<div class="mod_ft"></div>
</div>

jQuery 多功能无缝滚动显示插件:垂直滚动


<div id="module_g" class="mod">
<div class="mod_hd">
<h2>jQuery 多功能无缝滚动显示插件:垂直滚动</h2>
</div>
<div class="mod_bd">
<div class="demo">
<div id="wrap7" class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$('#wrap7').marquee({
auto: true,
interval: 2000,
showNum: 3,
stepLen: 3,
type: 'vertical'
});
})
</script>
</div>
<div class="code"></div>
</div>
<div class="mod_ft"></div>
</div>

jQuery 多功能无缝滚动显示插件:显示个数 !== 每次步长


<div id="module_h" class="mod">
<div class="mod_hd">
<h2>jQuery 多功能无缝滚动显示插件:显示个数 !== 每次步长</h2>
</div>
<div class="mod_bd">
<div class="demo">
<div id="wrap8" class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<input type="button" value="上一组" id="prev8" />
<input type="button" value="下一组" id="next8" />
<script type="text/javascript">
$(function() {
$('#wrap8').marquee({
auto: false,
prevElement: $('#prev8'),
nextElement: $('#next8'),
showNum: 4,
stepLen: 3,
type: 'vertical'
});
})
</script>
</div>
<div class="code"></div>
</div>
<div class="mod_ft"></div>
</div>

jQuery 多功能无缝滚动显示插件:支持回调


<div id="module_i" class="mod">
<div class="mod_hd">
<h2>jQuery 多功能无缝滚动显示插件:支持回调</h2>
</div>
<div class="mod_bd">
<div class="demo">
<div id="wrap9" class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<input type="button" value="上一组" id="prev9" />
<input type="button" value="下一组" id="next9" />
<script type="text/javascript">
$(function() {
$('#wrap9').marquee({
auto: false,
speed: 500,
showNum: 3,
stepLen: 3,
prevElement: $('#prev9'),
nextElement: $('#next9'),
prevBefore: function() {
alert('prev before callback~')
},
prevAfter: function() {
alert('prev after callback~')
},
nextBefore: function() {
alert('next before callback~')
},
nextAfter: function() {
alert('next after callback~')
}
});
})
</script>
</div>
<div class="code"></div>
</div>
<div class="mod_ft"></div>
</div>

  •   本文标题:jQuery 多功能无缝滚动显示插件 - Break易站
    转载请保留页面地址:https://www.breakyizhan.com/jquery/5427.html
      微信返利机器人
      免费:淘宝,京东,拼多多优惠券
      腾讯,爱奇艺,优酷的VIP视频免费解析,免费看
      即刻扫描二维码,添加微信机器人!

    发表笔记

    电子邮件地址不会被公开。 必填项已用*标注