以更少的代码实现相同的效果应该是我们写程序的究极目标，当然可读性不能丢。在基于javascript的无缝滚动动画实现1最后一个运行框，我已经做了这样的探索。不过换汤不换药，还是来来回回在scrollTop/scrollLeft与offsetTop/offsetLeft上做文章。总的思路基本是这样，让某个元素整体向某个方向移动，这样它里面的内容（图片或文字）就跟着移动，当元素移动到某一个距离后就回到原点。为了防止内容移着移着就没有了，我们需要两套相同的内容。在第一部分，第二套内容是动态生成的，并复制到另一个兄弟元素中，这在水平滚动时，我们需要花一些周折来让所有内容水平排列在一起。我就想，如果把第二套内容直接加在相同的元素是否效果会更好呢？起码CSS也少写一点。用scrollTop/scrollLeft实现滚动，还有一个缺点，它对父容器的宽度与高度有严格的规定的。比如我们想上下滚动图片，ul作为容器，li的图片为滚动内容，那么ul的高至少为图片的高的两倍（我们假设每张图片的尺寸都是相等的），否则就动不了。鉴此，我开发了新一代的无缝滚动函数。

<ul id="marquee"> <li> <a href="http://mand("BackgroundImageCache", false, true);}catch(e){}; var container = document.getElementById(id), slide = container.getElementsByTagName("li")[0], options = arguments[1] || {}, speed = options.speed || 10, direction = options.direction || "left"; slide.innerHTML += slide.innerHTML; var item = slide.getElementsByTagName("a"), critical,delta,rolling,field; if(direction == "left" || direction == "right"){ slide.style.cssText = "width:1000%"; for(var i=0 ,l=item.length; i<l;i++){ item[i].style.cssText = "float:left"; } field = "left"; critical = item[item.length/2].offsetLeft; }else if(direction == "up" || direction == "down"){ field = "top"; critical = item[item.length/2].offsetTop; } if(direction == "up" || direction == "left"){ delta = 0; rolling = function(){ delta == -critical ? delta = 0 : delta--; slide.style[field] = delta + "px"; } }else if(direction == "down" || direction == "right"){ delta = -critical; rolling = function(){ delta == 0 ? delta = -critical : delta++; slide.style[field] = delta + "px"; } } var timer = setInterval(rolling,speed)//设置定时器 container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器}

使用：

Marquee("marquee",{speed:35,direction:"up"});

有了这个我们实现另一种图片轮换就容易了，这里先做个预告吧。本文到此为止。

到此这篇关于基于javascript的无缝滚动动画实现2的文章就介绍到这了,更多相关javascript无缝滚动内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！