图片无缝滚动的完美解决

hmilyzhang · 发表于 2006-4-14 12:57:45

<STRONG><FONT size=2><FONT face=Arial><SPAN class=smalltxt twffan="done"><SPAN class=bold twffan="done">图片无缝滚动的完美解决</SPAN></SPAN><BR><BR></FONT></FONT></STRONG><SPAN style="FONT-SIZE: 12px" twffan="done">图片无缝滚动的完美解决<BR><BR> 想必大家都注意到<marquee>的不循环滚动，所以出现了很多替代脚本，或iframe或JS输出<marquee>，不管怎么做，都略显麻烦。下面说一下这个相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。 <BR><BR>先了解一下对象的几个的属性：<BR>innerHTML:设置或获取位于对象起始和结束标签内的 HTML<BR>scrollHeight: 获取对象的滚动高度。 <BR>scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离<BR>scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离<BR>scrollWidth:获取对象的滚动宽度<BR>offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度<BR>offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置<BR>offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 <BR>offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度<BR><BR>好，先看这个向上滚动的代码： <BR><BR><base href="http://www.flash8.net";><BR><div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff><div id=demo1><BR><img src="images/flash8.gif"><BR><img src="images/link/flashempire.gif"><BR><img src="images/linklogo/shlogo.gif"><BR><img src="images/link/deskcity.gif"><BR><img src="images/linklogo/5dmeng.gif"><BR><img src="/Article/UploadFiles/200411/20041112234106773.gif"><BR><img src="images/link/flashskylogo.gif"><BR><img src="images/link/5dlogo88.gif"><BR><img src="http://www.yiiboo.com/cgercn/link.gif";><BR></div><BR><div id=demo2></div><BR></div><BR> <script><BR> var speed=30<BR> demo2.innerHTML=demo1.innerHTML file://克隆demo1为demo2<BR> function Marquee(){<BR> if(demo2.offsetTop-demo.scrollTop<=0) file://当滚动至demo1与demo2交界时<BR> demo.scrollTop-=demo1.offsetHeight file://demo跳到最顶端<BR> else{<BR> demo.scrollTop++<BR> }<BR> }<BR> var MyMar=setInterval(Marquee,speed) file://设置定时器<BR> demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的<BR> demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器<BR> </script><BR><BR><BR>向下滚动： <BR><BR><base href="http://www.flash8.net";><BR> <div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff><div id=demo1><BR> <img src="images/flash8.gif"><BR> <img src="images/link/flashempire.gif"><BR> <img src="images/linklogo/shlogo.gif"><BR> <img src="images/link/deskcity.gif"><BR> <img src="images/linklogo/5dmeng.gif"><BR> <img src="/Article/UploadFiles/200411/20041112234106773.gif"><BR> <img src="images/link/flashskylogo.gif"><BR> <img src="images/link/5dlogo88.gif"><BR> <img src="http://www.yiiboo.com/cgercn/link.gif";><BR> </div><BR> <div id=demo2></div><BR> </div><BR> <script><BR> var speed=30<BR> demo2.innerHTML=demo1.innerHTML<BR> demo.scrollTop=demo.scrollHeight<BR> function Marquee(){<BR> if(demo1.offsetTop-demo.scrollTop>=0)<BR> demo.scrollTop+=demo2.offsetHeight<BR> else{<BR> demo.scrollTop--<BR> }<BR> }<BR> var MyMar=setInterval(Marquee,speed)<BR> demo.onmouseover=function() {clearInterval(MyMar)}<BR> demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}<BR> </script><BR><BR>向左滚动： <BR><BR><base href="http://www.flash8.net";><BR> <div id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="images/link/flashempire.gif"><img src="images/linklogo/shlogo.gif"><img src="images/link/deskcity.gif"><img src="images/linklogo/5dmeng.gif"><img src="/Article/UploadFiles/200411/20041112234106773.gif"><img src="images/link/flashskylogo.gif"><img src="images/link/5dlogo88.gif"><img src="http://www.yiiboo.com/cgercn/link.gif";><img src="images/flash8.gif"></td><td id=demo2 valign=top></td></tr></table></div><BR> <script><BR> var speed=30<BR> demo2.innerHTML=demo1.innerHTML<BR> function Marquee(){<BR> if(demo2.offsetWidth-demo.scrollLeft<=0)<BR> demo.scrollLeft-=demo1.offsetWidth<BR> else{<BR> demo.scrollLeft++<BR> }<BR> }<BR> var MyMar=setInterval(Marquee,speed)<BR> demo.onmouseover=function() {clearInterval(MyMar)}<BR> demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}<BR> </script><BR><BR><BR>向右滚动： <BR><BR><base href="http://www.flash8.net";><BR> <div id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="images/link/flashempire.gif"><img src="images/linklogo/shlogo.gif"><img src="images/link/deskcity.gif"><img src="images/linklogo/5dmeng.gif"><img src="/Article/UploadFiles/200411/20041112234106773.gif"><img src="images/link/flashskylogo.gif"><img src="images/link/5dlogo88.gif"><img src="http://www.yiiboo.com/cgercn/link.gif";><img src="images/flash8.gif"></td><td id=demo2 valign=top></td></tr></table></div><BR> <script><BR> var speed=30<BR> demo2.innerHTML=demo1.innerHTML<BR>demo.scrollLeft=demo.scrollWidth<BR> function Marquee(){<BR> if(demo.scrollLeft<=0)<BR> demo.scrollLeft+=demo2.offsetWidth<BR> else{<BR> demo.scrollLeft--<BR> }<BR> }<BR> var MyMar=setInterval(Marquee,speed)<BR> demo.onmouseover=function() {clearInterval(MyMar)}<BR> demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}<BR> </script></SPAN> <BR>

嘟嘟 · 发表于 2006-5-19 23:19:01

- -! 好复杂了！比明白！

		自动登录	找回密码
密码			立即注册

图片无缝滚动的完美解决

王子的皇冠

大富翁

大众宠儿

外太空使者

社区居民