会员登录/控制面版您的位置: 首页 >> 网页制作 >> 技巧点滴 >> 如何实现图片的无缝循环滚动

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

阅览次数:
文章来源: 闪吧
原文作者: 闪吧
整理日期: 2005-09-21
发表评论

字体大小:
小
中
大

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

<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="images/flash8.gif">
<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="/Upload/2005-09/logo.gif">
<img src="images/link/flashskylogo.gif">
<img src="images/link/5dlogo88.gif">
<img src="/Upload/2005-09/link.gif">
</div>
<div id=demo2></div>
</div>
   <script>
   var speed=30
   demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2
   function Marquee(){
//当滚动至demo1与demo2交界时
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
else{
demo.scrollTop++
   }
   }
   var MyMar=setInterval(Marquee,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
   demo.onmouseover=function() {clearInterval(MyMar)}
//鼠标移开时重设定时器
   demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
   </script>

2.向下滚动。

<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="images/flash8.gif">
  <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="/Upload/2005-09/logo.gif">
  <img src="images/link/flashskylogo.gif">
  <img src="images/link/5dlogo88.gif">
  <img src="/Upload/2005-09/link.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>

3.向左滚动。

<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="images/link/flashempire.gif">
<img src="images/linklogo/shlogo.gif">
<img src="images/link/deskcity.gif">
<img src="images/linklogo/5dmeng.gif">
<img src="/Upload/2005-09/logo.gif">
<img src="images/link/flashskylogo.gif">
<img src="images/link/5dlogo88.gif">
<img src="/Upload/2005-09/link.gif">
<img src="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>

4.向右滚动。

<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="images/link/flashempire.gif">
<img src="images/linklogo/shlogo.gif">
<img src="images/link/deskcity.gif">
<img src="images/linklogo/5dmeng.gif">
<img src="/Upload/2005-09/logo.gif">
<img src="images/link/flashskylogo.gif">
<img src="images/link/5dlogo88.gif">
<img src="/Upload/2005-09/link.gif">
<img src="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>

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

<base href="http://www.flash8.net">
<div id=demo style="overflow-x:hidden;overflow-y:scroll;
height:100;width:90;background:#214984">
<img src="images/flash8.gif">
<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="/Upload/2005-09/logo.gif">
<img src="images/link/flashskylogo.gif">
<img src="images/link/5dlogo88.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>

特别提示
运行本例所给的四段代码，将看到图片分别按指定的上、下、左和右四个方向循环滚动。图1.8.29为提示中所给代码的运行效果，可以看到，Y轴的滚动滑块滚动一段距离(在红色背景的那块滚动到顶端时)后又自动跳到顶端。

图1.8.29 循环无缝滚动的原理演示

特别说明

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

上一篇:深入理解sizeof
下一篇:Photoshop调色，制作阿宝色彩的练习

相关文章

热点文章

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

特别说明

网友评论: