正文
无缝滚动jquery,dw图片滚动效果无缝滚动
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
jQuery文字无缝滚动
jq有一个scroll.js插件，就是实现文字无缝滚动的。其使用方法也很简单。
①：在head/head标签里面引用文件 jquery.js，scroll.js，style.css；
②：调用相关的js；如：
script type="text/javascript"
$(document).ready(function(){
$('.list_lh li:even').addClass('lieven');
$("div.list_lh").myScroll({
speed:40, //数值越大，速度越慢
rowHeight:68 //li的高度
});
});
/script
PS：li的高度与rowHeight的值要一致，要不然的话会出现卡顿。
相关问答
Q1: 基于jQuery实现一个marquee无缝滚动的插件
基于jQuery，实现一个marquee无缝滚动的插件，已经发布到
git.oschina.net，演示稍后更新（更新到
）。
代码如下：
/**
*
类库名称：jQuery.marquee
*
实现功能：基于
jquery
实现的
marquee
无缝滚动插件
*
作者主页：
*
联系邮箱：mqycn@126.com
*
使用说明：
*
最新版本：
*/
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
=
'tabletrtd[TABLE]/tdtd[TABLE]/td/tr/table';
break;
case
"top":
case
"bottom":
opt.weight
=
"height";
opt.margin
=
"margin-top";
opt.tpl
=
'tabletrtd[TABLE]/td/tr/trtd[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)
){
_margin
=
0;
}else
if(
opt.addon
==
1,
_margin
){
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实现一个marquee无缝滚动的插件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
Q2: jquery marquee怎么无缝向左滚动
无缝滚动：
MARQUEE behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100"SPAN unselectable="on"/SPAN/MARQUEE
左右滚动：
marquee direction="right" behavior="alternate"font size=30 color="red"我会左右滚动哦/font/marquee
Q3: js图片无缝滚动的原理是什么
以垂直滚动为例：一组图片 控制它的滚动条进行滚动 且此时对这组图片进行复制并添加进原图片组中，现在就有两组图片了。你可以想象一下，现在滚动条继续滚动，原来那组图片最后一张图片已经滚至顶端且消失，复制的那组图片的第一张跟在原图最后一张图片后出现，此时你就能感觉到无缝滚动了，而就在此刻我们将滚动条高度设置为0（因为速度很快，所以不会出现停顿感），你感觉图片就这样一直不停的滚动下去了。关键点在于元素的复制、添加，以及滚动条距离的获取和修改。网上代码很多，都是基于这类构思
