如何实现图片的无缝循环滚动

最新推荐文章于 2022-05-12 21:48:18 发布

qianhuajuan

最新推荐文章于 2022-05-12 21:48:18 发布

阅读量1.5k

点赞数

文章标签： function table div border scroll url

如何实现图片的无缝循环滚动

作者:haao 日期:2006-05-16

解决思路：
一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆副本，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到"无缝"滚动的目的。

向上滚动

< div id =demo style =overflow:hidden;height:100;width:90;

background:#214984;color:#ffffff >

< div id =demo1 >

< img src ="http://www.haao.cn/logo.gif" >

</ div >

< div id =demo2 ></ div >

</ div >

< script >

var speed=30

demo2.innerHTML=demo1.innerHTML

demo.scrollTop=demo.scrollHeight

function Marquee(){

if(demo1.offsetTop-demo.scrollTop>=0)

demo.scrollTop+=demo2.offsetHeight

else{

demo.scrollTop--

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</ script >

向下滚动

< div id ="demo" style ="overflow:hidden;width:670px;color:#ffffff;" >

< table cellpadding ="0" cellspacing ="0" border ="0" >

< tr >< td id ="demo1" valign ="top" align ="center" >

< table cellpadding ="2" cellspacing ="0" border ="0" >

< tr align ="center" >

< td >< img src ="http://www.haao.cn/logo.gif" width ="88" ></ td >

</ tr >

</ table >

</ td >

< td id ="demo2" valign ="top" ></ td >

</ tr >

</ table >

</ div >

< script >

var speed=1//速度数值越大速度越慢

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</ script >

向左滚动

< div id ="demo" style ="overflow:hidden;width:670px;color:#ffffff;" >

< table cellpadding ="0" cellspacing ="0" border ="0" >

< tr >< td id ="demo1" valign ="top" align ="center" >

< table cellpadding ="2" cellspacing ="0" border ="0" >

< tr align ="center" >

< td >< img src ="http://www.haao.cn/logo.gif" width ="88" ></ td >

</ tr >

</ table >

</ td >

< td id ="demo2" valign ="top" ></ td >

</ tr >

</ table >

</ div >

< script >

var speed=1//速度数值越大速度越慢

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</ script >

向右滚动

< div id ="demo" style ="overflow:hidden;width:670px;color:#ffffff;" >

< table cellpadding ="0" cellspacing ="0" border ="0" >

< tr >< td id ="demo1" valign ="top" align ="center" >

< table cellpadding ="2" cellspacing ="0" border ="0" >

< tr align ="center" >

< td >< img src ="http://www.haao.cn/logo.gif" width ="88" ></ td >

</ tr >

</ table >

</ td >

< td id ="demo2" valign ="top" ></ td >

</ tr >

</ table >

</ div >

< script >

var speed=1//速度数值越大速度越慢

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo.scrollLeft<=0)

demo.scrollLeft+=demo2.offsetWidth

else{

demo.scrollLeft--

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</ script >

提示：关于循环滚动的原理，光看本例代码的话可能会觉得枯涩难懂，那样的话可以运行下面修改过的代码，注意滚动条和背景颜色的变化：

< div id =demo style ="overflow-x:hidden;overflow-y:scroll;

height:100;width:90;background:#214984" >

< img src ="http://www.haao.cn/logo.gif" >

</ div >

< script >

function Marquee(obj,speed){

with(obj){

innerHTML=["<div>","</div><div style=’background:green’>","</div>"].join(innerHTML)

onmouseover=function(){clearInterval(MyMar)}

onmouseout=function(){

MyMar=setInterval(function(){

with(obj)

scrollTop+=(scrollTop<=lastChild.offsetTop?1:-lastChild.offsetHeight)},speed)}

fireEvent("onmouseout")

}

Marquee(demo,30)

</ script >

提示：关于循环滚动的原理，光看本例代码的话可能会觉得枯涩难懂，那样的话可以运行下面修改过的代码，注意滚动条和背景颜色的变化：

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

引用内容

特别说明

本例主要是对象属性中和滚动相关的几个属性的应用，各属性说明如下：
innerHTML 设置或获取位于对象起始和结束标签内的 HTML。
scrollHeight 获取对象的滚动高度。
scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。
scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
scrollWidth 获取对象的滚动宽度。
offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。
offsetWidth 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。

[本日志由 haao 于 2006-07-28 09:18 AM 编辑]

文章来自: 【转载】

引用通告地址: 查看引用地址
<script type="text/javascript"> // 引用地址显示 function showTrackBack(){ var tb_url_text tb_url_text = ' http://www.haao.cn/trackback.asp?tbID=171&key=667413
' document.getElementById("tburl").innerHTML = tb_url_text } </script>