jQuery中怎么实现文本无缝滚动的效果
导读：在实际案例的操作过程中，我们可能会遇到“jQuery中怎么实现文本无缝滚动的效果”这样的问题，那么我们该如何处理和解决这样的情况呢？这篇小编就给大家总结了一些方法，具有一定的借鉴价值，希望对大家有所帮助，接下来就让小编带领大家一起了解看看吧...
在实际案例的操作过程中，我们可能会遇到“jQuery中怎么实现文本无缝滚动的效果”这样的问题，那么我们该如何处理和解决这样的情况呢？这篇小编就给大家总结了一些方法，具有一定的借鉴价值，希望对大家有所帮助，接下来就让小编带领大家一起了解看看吧。基于jQuery，实现一个marquee无缝滚动的插件，已经发布到 git.oschina.net，演示稍后更新（更新到 http://git.oschina.net/mqycn/jQueryMarquee ）。
代码如下：
/**
* 类库名称：jQuery.marquee
* 实现功能：基于 jquery 实现的 marquee 无缝滚动插件
* 作者主页：http://www.miaoqiyuan.cn/
* 联系邮箱：mqycn@126.com
* 使用说明：http://www.miaoqiyuan.cn/p/jquery-marquee
* 最新版本：http://git.oschina.net/mqycn/jQueryMarquee
*/
jQuery.fn.extend({
marquee : function(opt, callback){
opt = opt || {
}
;
opt.speed = opt.speed || 30;
opt.direction = opt.direction || 'left';
opt.pixels = opt.pixels || 2;
switch( opt.direction ){
case "left":
case "right":
opt.weight = "width";
opt.margin = "margin-left";
opt.tpl = 'table>
tr>
td>
[TABLE]/td>
td>
[TABLE]/td>
/tr>
/table>
';
break;
case "top":
case "bottom":
opt.weight = "height";
opt.margin = "margin-top";
opt.tpl = 'table>
tr>
td>
[TABLE]/td>
/tr>
/tr>
td>
[TABLE]/td>
/tr>
/table>
';
break;
default:
throw Error("[jQuery.marquee.js] Options.direction Error!");
}
switch( opt.direction ){
case "left":
case "top":
opt.addon = -1;
break;
case "right":
case "bottom":
opt.addon = 1;
break;
default:
throw Error("[jQuery.marquee.js] Options.direction Error!");
}
callback = typeof callback == "function" ? callback : function(){
}
;
//设置宽度
$(this).each(function(){
if( this.control ){
clearInterval(this.control);
}
else {
//如果第一次执行，初始化代码
$(this)
.data(opt.weight, opt.weight == 'width' ? $(this).find("table").width() : $(this).find("table").height())
.width($(this).data(opt.weight) * 2)
.html(opt.tpl.replace(/\[TABLE\]/ig, $(this).html()))
.mouseover(function(){
$(this).data("pause", true);
}
).mouseout(function(){
$(this).data("pause", false);
}
);
}
this.control = setInterval((function(){
if( $(this).data("pause") ){
return;
}
var _margin = parseInt($(this).css(opt.margin)) + opt.addon * opt.pixels;
if( opt.addon == -1 &
&
_margin + $(this).data(opt.weight) 0 ){
_margin = 0;
}
else if( opt.addon == 1, _margin >
0 ){
console.log(_margin 0,$(this).data(opt.weight));
_margin = -1 * $(this).data(opt.weight);
}
$(this).css(opt.margin, _margin + "px");
callback.bind(this)();
}
).bind(this), opt.speed);
}
);
return $(this);
}
}
);
如果在IE9以下使用，还需要在之前增加如下代码：
/**
* IE8插件（解决 function 不支持 bind 的问题），非原创
*/
if (!Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
if (typeof this !== "function") {
throw new TypeError("[jQuery.marquee.ie8] Caller is not a function");
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function() {
}
,
fBound = function() {
return fToBind.apply(this instanceof fNOP &
&
oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
}
;
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
}
;
}
一共有三个可选参数，一个回调方法。
direction，移动方向：支持 左：left 右：right 上：top 下：bottom；
pixels，每次移动的像素数
speed，两次移动之前的间隔时间数（毫秒）
调用方法如下：
$("scroll-a").marquee();
$("scroll-b").marquee({
direction:'top'}
);
$("scroll-c").marquee({
direction:'top',pixels:2,speed:30}
);
$("scroll-d").marquee({
direction:"top",pixels:2,speed:30}
, function(){
console.log("执行了一次");
}
);
到此这篇关于“jQuery中怎么实现文本无缝滚动的效果”的文章就介绍到这了，感谢各位的阅读，更多相关jQuery中怎么实现文本无缝滚动的效果内容，欢迎关注网络资讯频道，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： jQuery中怎么实现文本无缝滚动的效果
本文地址： https://pptw.com/jishu/654845.html