无缝滚动jquery,无缝滚动原理
基于jQuery实现一个marquee无缝滚动的插件
基于jQuery，实现一个marquee无缝滚动的插件，已经发布到
成都创新互联公司从2013年成立，是专业互联网技术服务公司，拥有项目成都网站制作、成都网站建设、外贸营销网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元恩阳做网站,已为上家服务,为恩阳各地企业和个人服务,联系电话:18980820575
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无缝滚动的插件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
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
js图片无缝滚动的原理是什么
以垂直滚动为例：一组图片 控制它的滚动条进行滚动 且此时对这组图片进行复制并添加进原图片组中，现在就有两组图片了。你可以想象一下，现在滚动条继续滚动，原来那组图片最后一张图片已经滚至顶端且消失，复制的那组图片的第一张跟在原图最后一张图片后出现，此时你就能感觉到无缝滚动了，而就在此刻我们将滚动条高度设置为0（因为速度很快，所以不会出现停顿感），你感觉图片就这样一直不停的滚动下去了。关键点在于元素的复制、添加，以及滚动条距离的获取和修改。网上代码很多，都是基于这类构思
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的值要一致，要不然的话会出现卡顿。
用jquery实现两个li中的图片并列无缝向上滚动的代码 没有按钮控制，鼠标移上去停止滚动，离开开始滚动。
下面的使用Jquery实现，使用的时候请引用Jquery.js，向上滚动看看js那里提示修改left为up即可。
style type="text/css"
.scrollleft{width:491px; float:left; padding-top:15px;}
.scrollleft li{float:left;display:inline;width:195px;text-align:center;}
/style
script
$.fn.imgscroll = function(o){
var defaults = {
speed: 40,
amount: 0,
width: 1,
dir: "left"
};
o = $.extend(defaults, o);
return this.each(function(){
var _li = $("li", this);
_li.parent().parent().css({overflow: "hidden", position: "relative"}); //div
_li.parent().css({margin: "0", padding: "0", overflow: "hidden", position: "relative", "list-style": "none"}); //ul
_li.css({position: "relative", overflow: "hidden"}); //li
if(o.dir == "left") _li.css({float: "left"});
//初始大小
var _li_size = 0;
for(var i=0; i_li.size(); i++)
_li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true);
//循环所需要的元素
if(o.dir == "left") _li.parent().css({width: (_li_size*3)+"px"});
_li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone());
_li = $("li", this);
//滚动
var _li_scroll = 0;
function goto(){
_li_scroll += o.width;
if(_li_scroll _li_size)
{
_li_scroll = 0;
_li.parent().css(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll });
_li_scroll += o.width;
}
_li.parent().animate(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }, o.amount);
}
//开始
var move = setInterval(function(){ goto(); }, o.speed);
_li.parent().hover(function(){
clearInterval(move);
},function(){
clearInterval(move);
move = setInterval(function(){ goto(); }, o.speed);
});
});
};
$(document).ready(function(){
$(".scrollleft").imgscroll({
speed: 40, //图片滚动速度
amount: 0, //图片滚动过渡时间
width: 1, //图片滚动步数
dir: "left" // "left" 或 "up" 向左或向上滚动
});
});
/script
div class="scrollleft"
ul
li
a href="#"img src="images/img4.gif" width="188" height="106" /div class="mingcheng"该产品名称/div/a
/li
li
a href="#"img src="images/img4.gif" width="188" height="106" /div class="mingcheng"该产品名称/div/a
/li
li
a href="#"img src="images/img4.gif" width="188" height="106" /div class="mingcheng"该产品名称/div/a
/li
li
a href="#"img src="images/img4.gif" width="188" height="106" /div class="mingcheng"该产品名称/div/a
/li
li
a href="#"img src="images/img4.gif" width="188" height="106" /div class="mingcheng"该产品名称/div/a
/li
li
a href="#"img src="images/img4.gif" width="188" height="106" /div class="mingcheng"该产品名称/div/a
/li
li
a href="#"img src="images/img4.gif" width="188" height="106" /div class="mingcheng"该产品名称/div/a
/li
li
a href="#"img src="images/img4.gif" width="188" height="106" /div class="mingcheng"该产品名称/div/a
/li
/ul
/div
分享标题：无缝滚动jquery,无缝滚动原理
文章分享：http://myzitong.com/article/dsgjhpo.html