无缝滚动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