jquery无间隙滚动代码（jquery无缝滚动）

本篇文章给大家谈谈jquery无间隙滚动代码，以及jquery无缝滚动对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、用jquery实现两个li中的图片并列无缝向上滚动的代码 没有按钮控制，鼠标移上去停止滚动，离开开始滚动。
• 2、基于jQuery实现一个marquee无缝滚动的插件
• 3、Jquery点击滚动代码，写了点击事件，但不知道怎么让它循环
• 4、jQuery实现将div中滚动条滚动到指定位置的方法
• 5、jQuery文字无缝滚动
• 6、我想给这段jQuery代码添加自动循环向上滚动效果，请高手帮忙，代码如下：

用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实现一个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无缝滚动的插件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

Jquery点击滚动代码，写了点击事件，但不知道怎么让它循环

(function($){

var totalPage = $('.hp_box').children().length;//总页数

var nowPage = 1;//当前页

$('.tj_prev').click(function(){

    nowPage --;

    if(nowPage  1)

    {

        nowPage = totalPage;

    }

    $('.hp_box').animate({left:-(nowPage - 1 ) * 248 +'px'});

});

$('.tj_next').click(function(){

    nowPage ++;

    if(nowPage  totalPage)

    {

        nowPage = 1;

    }

    $('.hp_box').animate({left:-(nowPage - 1 ) * 248 +'px'});

});

setInterval("timerFunc()",8000); //定时器,8秒执行一次

timerFunc = function(){

    nowPage ++ ;

    if(nowPage  totalPage)

    {

        nowPage = 1;

    }

    $('.hp_box').animate({left:-(nowPage - 1 ) * 248 +'px'});

};

})(jQuery);

jQuery实现将div中滚动条滚动到指定位置的方法

本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法。分享给大家供大家参考，具体如下：

一、Js代码：

onload

=

function

()

{

//初始化

scrollToLocation();

};

function

scrollToLocation()

{

var

mainContainer

=

$('#thisMainPanel'),

scrollToContainer

=

mainContainer.find('.son-panel:last');//滚动到div

id="thisMainPanel"中类名为son-panel的最后一个div处

//scrollToContainer

=

mainContainer.find('.son-panel:eq(5)');//滚动到div

id="thisMainPanel"中类名为son-panel的第六个处

//非动画效果

//mainContainer.scrollTop(

//

scrollToContainer.offset().top

-

mainContainer.offset().top

+

mainContainer.scrollTop()

//);

//动画效果

mainContainer.animate({

scrollTop:

scrollToContainer.offset().top

-

mainContainer.offset().top

+

mainContainer.scrollTop()

},

2000);//2秒滑动到指定位置

}

二、Html代码：

div

id="thisMainPanel"

style="height:200px;overflow-y:

scroll;border:1px

solid

#f3f3f3;"

div

class="son-panel"我是类容区域-1/div

div

class="son-panel"我是类容区域-2/div

div

class="son-panel"我是类容区域-3/div

div

class="son-panel"我是类容区域-4/div

div

class="son-panel"

style="height:160px;"我是类容区域-5/div

div

class="son-panel"我是类容区域-6/div

div

class="son-panel"我是类容区域-7/div

div

class="son-panel"我是类容区域-8/div

/div

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》、《jQuery

form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

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代码添加自动循环向上滚动效果，请高手帮忙，代码如下：

给你一个函数

你调用下就OK了，支持加速滚动、循环滚动、间隔滚动、上下滚动、左右滚动等等

直接将这段代码拷贝到一个JS文件里面，这段代码需要jquery1.3以上运行环境。

代码里面有调用示例。

望采纳··

/**

* @classDescription 超级Marquee，可做图片导航，图片轮换

* @dependence jQuery 1.3.2

* @DOM

* div id="marquee"

* ul

* li/li

* li/li

* /ul

* /div

* @CSS

* #marquee {width:200px;height:50px;overflow:hidden;}

* @Usage

* $('#marquee').superMarquee(options);

* @options

* distance:200,//一次滚动的距离

* duration:20,//缓动效果，单次移动时间，越小速度越快，为0时无缓动效果

* time:5,//停顿时间，单位为秒

* direction: 'left',//滚动方向，'left','right','up','down'

* scrollAmount:1,//步长

* scrollDelay:20//时长，单位为毫秒

* isEqual:true,//所有滚动的元素长宽是否相等,true,false

* loop: 0,//循环滚动次数，0时无限

* btnGo:{left:'#goL',right:'#goR'},//控制方向的按钮ID，有四个属性left,right,up,down分别对应四个方向

* eventGo:'click',//鼠标事件

* controlBtn:{left:'#goL',right:'#goR'},//控制加速滚动的按钮ID，有四个属性left,right,up,down分别对应四个方向

* newAmount:4,//加速滚动的步长

* eventA:'mouseenter',//鼠标事件，加速

* eventB:'mouseleave',//鼠标事件，原速

* navId:'#marqueeNav', //导航容器ID，导航DOM:ulli1/lili2/liul,导航CSS:.navOn

* eventNav:'click' //导航事件

*/

(function($){

$.fn.superMarquee = function(options){

var opts = $.extend({},$.fn.superMarquee.defaults, options);

return this.each(function(){

var $marquee = $(this);//滚动元素容器

var _scrollObj = $marquee.get(0);//滚动元素容器DOM

var scrollW = $marquee.width();//滚动元素容器的宽度

var scrollH = $marquee.height();//滚动元素容器的高度

var $element = $marquee.children(); //滚动元素

var $kids = $element.children();//滚动子元素

var scrollSize=0;//滚动元素尺寸

var _type = (opts.direction == 'left' || opts.direction == 'right') ? 1:0;//滚动类型，1左右，0上下

var scrollId, rollId, isMove, marqueeId;

var t,b,c,d,e; //滚动动画的参数,t:当前时间，b:开始的位置，c:改变的位置，d:持续的时间，e:结束的位置

var _size, _len; //子元素的尺寸与个数

var $nav,$navBtns;

var arrPos = [];

var numView = 0; //当前所看子元素

var numRoll=0; //轮换的次数

var numMoved = 0;//已经移动的距离

//防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度

$element.css(_type?'width':'height',10000);

//获取滚动元素的尺寸

var navHtml = 'ul';

if (opts.isEqual) {

_size = $kids[_type?'outerWidth':'outerHeight']();

_len = $kids.length;

scrollSize = _size * _len;

for(var i=0;i_len;i++){

arrPos.push(i*_size);

navHtml += 'li'+ (i+1) +'/li';

}

}else{

$kids.each(function(i){

arrPos.push(scrollSize);

scrollSize += $(this)[_type?'outerWidth':'outerHeight']();

navHtml += 'li'+ (i+1) +'/li';

});

}

navHtml += '/ul';

//滚动元素总尺寸小于容器尺寸，不滚动

if (scrollSize(_type?scrollW:scrollH)) return;

//克隆滚动子元素将其插入到滚动元素后，并设定滚动元素宽度

$element.append($kids.clone()).css(_type?'width':'height',scrollSize*2);

//轮换导航

if (opts.navId) {

$nav = $(opts.navId).append(navHtml).hover( stop, start );

$navBtns = $('li', $nav);

$navBtns.each(function(i){

$(this).bind(opts.eventNav,function(){

if(isMove) return;

if(numView==i) return;

rollFunc(arrPos[i]);

$navBtns.eq(numView).removeClass('navOn');

numView = i;

$(this).addClass('navOn');

});

});

$navBtns.eq(numView).addClass('navOn');

}

//设定初始位置

if (opts.direction == 'right' || opts.direction == 'down') {

_scrollObj[_type?'scrollLeft':'scrollTop'] = scrollSize;

}else{

_scrollObj[_type?'scrollLeft':'scrollTop'] = 0;

}

if(opts.isMarquee){

//滚动开始

//marqueeId = setInterval(scrollFunc, opts.scrollDelay);

marqueeId = setTimeout(scrollFunc, opts.scrollDelay);

//鼠标划过停止滚动

$marquee.hover(

function(){

clearInterval(marqueeId);

},

function(){

//marqueeId = setInterval(scrollFunc, opts.scrollDelay);

clearInterval(marqueeId);

marqueeId = setTimeout(scrollFunc, opts.scrollDelay);

}

);

//控制加速运动

if(opts.controlBtn){

$.each(opts.controlBtn, function(i,val){

$(val).bind(opts.eventA,function(){

opts.direction = i;

opts.oldAmount = opts.scrollAmount;

opts.scrollAmount = opts.newAmount;

}).bind(opts.eventB,function(){

opts.scrollAmount = opts.oldAmount;

});

});

}

}else{

if(opts.isAuto){

//轮换开始

start();

//鼠标划过停止轮换

$marquee.hover( stop, start );

}

//控制前后走

if(opts.btnGo){

$.each(opts.btnGo, function(i,val){

$(val).bind(opts.eventGo,function(){

if(isMove == true) return;

opts.direction = i;

rollFunc();

if (opts.isAuto) {

stop();

start();

}

});

});

}

}

function scrollFunc(){

var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';

if(opts.isMarquee){

if (opts.loop 0) {

numMoved+=opts.scrollAmount;

if(numMovedscrollSize*opts.loop){

_scrollObj[_dir] = 0;

return clearInterval(marqueeId);

}

}

var newPos = _scrollObj[_dir]+(opts.direction == 'left' || opts.direction == 'up'?1:-1)*opts.scrollAmount;

}else{

if(opts.duration){

if(t++d){

isMove = true;

var newPos = Math.ceil(easeOutQuad(t,b,c,d));

if(t==d){

newPos = e;

}

}else{

newPos = e;

clearInterval(scrollId);

isMove = false;

return;

}

}else{

var newPos = e;

clearInterval(scrollId);

}

}

if(opts.direction == 'left' || opts.direction == 'up'){

if(newPos=scrollSize){

newPos-=scrollSize;

}

}else{

if(newPos=0){

newPos+=scrollSize;

}

}

_scrollObj[_dir] = newPos;

if(opts.isMarquee){

marqueeId = setTimeout(scrollFunc, opts.scrollDelay);

}else if(td){

if(scrollId) clearTimeout(scrollId);

scrollId = setTimeout(scrollFunc, opts.scrollDelay);

}else{

isMove = false;

}

};

function rollFunc(pPos){

isMove = true;

var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';

var _neg = opts.direction == 'left' || opts.direction == 'up'?1:-1;

numRoll = numRoll +_neg;

//得到当前所看元素序号并改变导航CSS

if(pPos == undefinedopts.navId){

$navBtns.eq(numView).removeClass('navOn');

numView +=_neg;

if(numView=_len){

numView = 0;

}else if(numView0){

numView = _len-1;

}

$navBtns.eq(numView).addClass('navOn');

numRoll = numView;

}

var _temp = numRoll0?scrollSize:0;

t=0;

b=_scrollObj[_dir];

//c=(pPos != undefined)?pPos:_neg*opts.distance;

e=(pPos != undefined)?pPos:_temp+(opts.distance*numRoll)%scrollSize;

if(_neg==1){

if(eb){

c = e-b;

}else{

c = e+scrollSize -b;

}

}else{

if(eb){

c =e-scrollSize-b;

}else{

c = e-b;

}

}

d=opts.duration;

//scrollId = setInterval(scrollFunc, opts.scrollDelay);

if(scrollId) clearTimeout(scrollId);

scrollId = setTimeout(scrollFunc, opts.scrollDelay);

}

function start(){

rollId = setInterval(function(){

rollFunc();

}, opts.time*1000);

}

function stop(){

clearInterval(rollId);

}

function easeOutQuad(t,b,c,d){

return -c *(t/=d)*(t-2) + b;

}

function easeOutQuint(t,b,c,d){

return c*((t=t/d-1)*t*t*t*t + 1) + b;

}

});

};

$.fn.superMarquee.defaults = {

isMarquee:false,//是否为Marquee

isEqual:true,//所有滚动的元素长宽是否相等,true,false

loop: 0,//循环滚动次数，0时无限

newAmount:3,//加速滚动的步长

eventA:'mousedown',//鼠标事件，加速

eventB:'mouseup',//鼠标事件，原速

isAuto:true,//是否自动轮换

time:5,//停顿时间，单位为秒

duration:50,//缓动效果，单次移动时间，越小速度越快，为0时无缓动效果

eventGo:'click', //鼠标事件，向前向后走

direction: 'left',//滚动方向，'left','right','up','down'

scrollAmount:1,//步长

scrollDelay:10,//时长

eventNav:'click'//导航事件

};

$.fn.superMarquee.setDefaults = function(settings) {

$.extend( $.fn.superMarquee.defaults, settings );

};

})(jQuery);

关于jquery无间隙滚动代码和jquery无缝滚动的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。