当前位置:首页 > 设计在线 > 网页设计 > Dreamweaver > 图片无缝滚动的完美解决

图片无缝滚动的完美解决

点击次数:25 次 发布日期:2008-11-27 17:21:21 作者:源代码网
源代码网推荐
图片无缝滚动的完美解决
  想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦。下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的。

先了解一下对象的几个的属性:
源代码网推荐innerHTML:设置或获取位于对象起始和结束标签内的 HTML
源代码网推荐scrollHeight: 获取对象的滚动高度。
源代码网推荐scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
源代码网推荐scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
源代码网推荐scrollWidth:获取对象的滚动宽度
源代码网推荐offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
源代码网推荐offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
源代码网推荐offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
源代码网推荐offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

好,先看这个向上滚动的代码:

 <base href="http://www.flash8.net">
源代码网推荐 <div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff><div id=demo1>
源代码网推荐 <img src="http://www.7880.com/Info/images/flash8.gif">
源代码网推荐 <img src="http://www.7880.com/Info/images/link/flashempire.gif">
源代码网推荐 <img src="http://www.7880.com/Info/images/linklogo/shlogo.gif">
源代码网推荐 <img src="http://www.7880.com/Info/images/link/deskcity.gif">
源代码网推荐 <img src="http://www.7880.com/Info/images/linklogo/5dmeng.gif">
源代码网推荐 <img src="http://www.zzchn.com/Article/UploadPic/2005-8/200581164849128.gif">
源代码网推荐 <img src="http://www.7880.com/Info/images/link/flashskylogo.gif">
源代码网推荐 <img src="http://www.7880.com/Info/images/link/5dlogo88.gif">
源代码网推荐 <img src="http://www.zzchn.com/Article/UploadPic/2005-8/200581164850157.gif">
源代码网推荐 </div>
源代码网推荐 <div id=demo2></div>
源代码网推荐 </div>
源代码网推荐   <script>
源代码网推荐   var speed=30
源代码网推荐   demo2.innerHTML=demo1.innerHTML file://克隆demo1为demo2
源代码网推荐   function Marquee(){
源代码网推荐   if(demo2.offsetTop-demo.scrollTop<=0) file://当滚动至demo1与demo2交界时
源代码网推荐   demo.scrollTop-=demo1.offsetHeight  file://demo跳到最顶端
源代码网推荐   else{
源代码网推荐   demo.scrollTop++
源代码网推荐   }
源代码网推荐   }
源代码网推荐   var MyMar=setInterval(Marquee,speed) file://设置定时器
源代码网推荐   demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
源代码网推荐   demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器
源代码网推荐   </script>
源代码网推荐

 向下滚动:

<base href="http://www.flash8.net">
源代码网推荐  <div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff><div id=demo1>
源代码网推荐  <img src="http://www.7880.com/Info/images/flash8.gif">
源代码网推荐  <img src="http://www.7880.com/Info/images/link/flashempire.gif">
源代码网推荐  <img src="http://www.7880.com/Info/images/linklogo/shlogo.gif">
源代码网推荐  <img src="http://www.7880.com/Info/images/link/deskcity.gif">
源代码网推荐  <img src="http://www.7880.com/Info/images/linklogo/5dmeng.gif">
源代码网推荐  <img src="http://www.zzchn.com/Article/UploadPic/2005-8/200581164849128.gif">
源代码网推荐  <img src="http://www.7880.com/Info/images/link/flashskylogo.gif">
源代码网推荐  <img src="http://www.7880.com/Info/images/link/5dlogo88.gif">
源代码网推荐  <img src="http://www.zzchn.com/Article/UploadPic/2005-8/200581164850157.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>

向左滚动: 

<base href="http://www.flash8.net">
源代码网推荐  <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="http://www.7880.com/Info/images/link/flashempire.gif"><img src="http://www.7880.com/Info/images/linklogo/shlogo.gif"><img src="http://www.7880.com/Info/images/link/deskcity.gif"><img src="http://www.7880.com/Info/images/linklogo/5dmeng.gif"><img src="http://www.zzchn.com/Article/UploadPic/2005-8/200581164849128.gif"><img src="http://www.7880.com/Info/images/link/flashskylogo.gif"><img src="http://www.7880.com/Info/images/link/5dlogo88.gif"><img src="http://www.zzchn.com/Article/UploadPic/2005-8/200581164850157.gif"><img src="http://www.7880.com/Info/images/flash8.gif"></td><td id=demo2 valign=top></td></tr></table></div>
源代码网推荐  <script>
源代码网推荐  var speed=30
源代码网推荐  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>
源代码网推荐 

向右滚动: 

<base href="http://www.flash8.net">
源代码网推荐  <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="http://www.7880.com/Info/images/link/flashempire.gif"><img src="http://www.7880.com/Info/images/linklogo/shlogo.gif"><img src="http://www.7880.com/Info/images/link/deskcity.gif"><img src="http://www.7880.com/Info/images/linklogo/5dmeng.gif"><img src="http://www.zzchn.com/Article/UploadPic/2005-8/200581164849128.gif"><img src="http://www.7880.com/Info/images/link/flashskylogo.gif"><img src="http://www.7880.com/Info/images/link/5dlogo88.gif"><img src="http://www.zzchn.com/Article/UploadPic/2005-8/200581164850157.gif"><img src="http://www.7880.com/Info/images/flash8.gif"></td><td id=demo2 valign=top></td></tr></table></div>
源代码网推荐  <script>
源代码网推荐  var speed=30
源代码网推荐  demo2.innerHTML=demo1.innerHTML
源代码网推荐 demo.scrollLeft=demo.scrollWidth
源代码网推荐  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>


源代码网供稿.
网友评论 (0)
会员中心
设计在线
本站推荐
设计在线之精华