Js代替marquee实现图片的无缝滚动Demo2012-02-15.doc

#demo background: #FFF; overflow: hidden; border: 1px dashed #CCC; height: 200px; text-align: center; float: left; #demo img border: 3px solid #F2F2F2; display: block; #demoDown background: #FFF; overflow: hidden; border: 1px dashed #CCC; height: 200px; text-align: center; float: left; #demoDown img border: 3px solid #F2F2F2; display: block; #demoLeft background: #FFF; overflow: hidden; border: 1px dashed #CCC; height: 100px; width: 1000px; text-align: center; #demoLeft img border: 3px solid #F2F2F2; float: left; display: block; #indemo float: left; width: 800%; #demoLeft1 float: left; #demoLeft2 float: left; #demoRight background: #FFF; overflow: hidden; border: 1px dashed #CCC; height: 100px; width: 1000px; text-align: center; #demoRight img border: 3px solid #F2F2F2; float: left; display: block; #demoInRight float: left; width: 800%; #demoRight1 float: left; #demoRight2 float: left; 作用背景 当marquee中滚动的是图片的时候，滚到中带你的时候直接就跳回到起点了，而不像文字那样可以无缝滚动。 以下用js实现 实现原理 一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2， demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的， 当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样， 所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。 基础知识储备： innerHTML:设置或获取位于对象起始和结束标签内的HTML scrollHeight ：获取对象的滚动高度。 scrollLeft :设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象现对于版面或有父坐标offsetParent属性指定的父坐标的高度 offsetLeft:获取对象现对于版面或有父坐标offsetParent属性指定的父坐标的左侧位置。 offsetTop:获取对象现对于版面或有父坐标offsetParent属性指定的父坐标的顶端高度。 offsetWidth:获取对象现对于版面或有父坐标offsetParent属性指定的父坐标的宽度。 向上滚动： var speed = 10; /速度,数字越大速度越慢 var tab = document.getElementById(demo); var tab1 = document.getElementById(demo1); var tab2 = document.getElementById(demo2); tab2.innerHTML = tab1.innerHTML; /克隆demo1为demo2 function Marquee() if (tab2.offsetTop - tab.scrollTop = 0)/当滚动至demo1和demo2的交界时 tab.scrollTop -= tab1.offsetHeight; /demo跳到最顶端 else tab.scrollTop+; var MyMar = setInterval(Marquee, speed); tab.onmouseover = function () clearInterval(MyMar) ; /鼠标移上时清除定时器达到滚动停止的目的 tab.onmouseout = function () MyMar = setInterval(Marquee, speed) ; /鼠标移开时重设定时器 向下滚动： var speedDown = 10; /速度 var tabDown = document.getElementById(demoDown); var tabDown1 = document.getElementById(demoDown1); var tabDown2 = document.getElementById(demoDown2); tabDown2.innerHTML = tabDown1.innerHTML; /克隆demoDown1为demoDown2 tabDown.scrollTop = tabDown.scrollHeight; function MarqueeDown() if (tabDown1.offsetTop - tabDown.scrollTop = 0)/当滚动至demoDown1和demo2的交界时 tabDown.scrollTop += tabDown2.offsetHeight; /demoDown跳到最顶端 else tabDown.scrollTop-; var MyMarDown = setInterval(MarqueeDown, speedDown); tabDown.onmouseover = function () clearInterval(MyMarDown) ; /鼠标移上时清除定时器达到滚动停止的目的 tabDown.onmouseout = function () MyMarDown = setInterval(MarqueeDown, speedDown) ; /鼠标移开时重设定时器 向左滚动： var speedLeft = 10; /速度 var tabLeft = document.getElementById(demoLeft); var tabLeft1 = document.getElementById(demoLeft1); var tabLeft2 = document.getElementById(demoLeft2); tabLeft2.innerHTML = tabLeft1.innerHTML; /克隆demoDown1为demoDown2 / tabLeft.scrollTop = tabLeft.scrollHeight; function MarqueeLeft() if (tabLeft2.offsetWidth - tabLeft.scrollLeft = 0)/当滚动至demoDown1和demo2的交界时 tabLeft.scrollLeft -= tabLeft2.offsetWidth; /demoDown跳到最顶端 else tabLeft.scrollLeft+; var MyMarLeft = setInterval(MarqueeLeft, speedLeft); tabLeft.onmouseover = function () clearInterval(MyMarLeft) ; /鼠标移上时清除定时器达到滚动停止的目的 tabLeft.onmouseout = function () MyMarLeft = setInterval(MarqueeLeft, speedLeft) ; /鼠标移开时重设定时器 向右滚动： var speedRight = 5; /速度 var tabRight = document.getElementById(demoRight); var tabRight1 = document.getElementById(demoRight1); var tabRight2 = document.getElementById(demoRight2); tabRight2.innerHTML = tabRight1.innerHTML; /克隆demoRight1为demoRight2 function MarqueeRight() if (tabRight.scrollLeft = 0)/当滚动至demoDown1和demo2的交界时 tabRight.scrollLeft += tabRight2.offsetWidth; /demoDown跳到最顶端 else tabRight.scrollLeft-; var MyMarRight = setInterval(Marq