无缝滚动jquery,无缝滚动原理

基于jQuery实现一个marquee无缝滚动的插件

基于jQuery，实现一个marquee无缝滚动的插件，已经发布到

成都创新互联公司从2013年成立，是专业互联网技术服务公司，拥有项目成都网站制作、成都网站建设、外贸营销网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元恩阳做网站,已为上家服务,为恩阳各地企业和个人服务,联系电话:18980820575

git.oschina.net，演示稍后更新（更新到

）。

代码如下：

/**

类库名称：jQuery.marquee

实现功能：基于

jquery

实现的

marquee

无缝滚动插件

作者主页：

联系邮箱：mqycn@126.com

使用说明：

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"