jquery marquee怎么無縫向左滾動

無縫滾動：

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名注冊、雅安服務器托管、營銷軟件、網站建設、西雙版納網站維護、網站推廣。

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

基于jQuery實現一個marquee無縫滾動的插件

基于jQuery，實現一個marquee無縫滾動的插件，已經發(fā)布到

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

{

//如果第一次執(zhí)行，初始化代碼

$(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

的問題），非原創(chuàng)

*/

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("執(zhí)行了一次");

});

以上所述是小編給大家介紹的基于jQuery實現一個marquee無縫滾動的插件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

用jquery實現兩個li中的圖片并列無縫向上滾動的代碼 沒有按鈕控制，鼠標移上去停止?jié)L動，離開開始滾動。

下面的使用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);

//循環(huán)所需要的元素

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

js圖片無縫滾動的原理是什么

以垂直滾動為例：一組圖片 控制它的滾動條進行滾動 且此時對這組圖片進行復制并添加進原圖片組中，現在就有兩組圖片了。你可以想象一下，現在滾動條繼續(xù)滾動，原來那組圖片最后一張圖片已經滾至頂端且消失，復制的那組圖片的第一張跟在原圖最后一張圖片后出現，此時你就能感覺到無縫滾動了，而就在此刻我們將滾動條高度設置為0（因為速度很快，所以不會出現停頓感），你感覺圖片就這樣一直不停的滾動下去了。關鍵點在于元素的復制、添加，以及滾動條距離的獲取和修改。網上代碼很多，都是基于這類構思

jquery效果 點擊小圖展示大圖，下面小圖是有左右按鈕的 可循環(huán)的無縫 滾動。 上面大圖自動播放

網上這類插件非常多，無非就是自己下下來，修改下樣式就好了，其他的如動畫輪播js是沒必要去修改的，小圖可以吧css中的按鈕改成圖片而已，沒必要自己寫哦，費腦子，

名稱欄目：jquery無縫滾動,jquery 滾動
瀏覽地址：http://chinadenli.net/article41/dsihded.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站建設、App開發(fā)、企業(yè)網站制作、品牌網站設計、品牌網站建設、品牌網站制作

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯