您所在的位置:小祥子 » 编程 » JavaScript » 正文

无缝不间断图片垂直滚动效果

时间:2015-07-16 编辑:我是代码努力 来源:CnBlogs

无缝不间断图片垂直滚动效果:

垂直滚动效果虽然使用频率没有水平滚动高,不过也有大量的使用,例如垂直滚动的友情链接效果,下面就结合实例简单介绍一下如何实现此效果,代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>图片友情链接上下滚动效果代码-蚂蚁部落</title> 
<style type="text/CSS"> 
div{ 
  width:280px; 
  height:240px; 
  overflow:hidden; 
} 
#main{ 
  margin:0px auto; 
  margin-top:50px; 
} 
ul{ 
  list-style:none; 
  margin:0px auto; 
  width:180px; 
  height:240px; 
} 
li{ 
  width:90px; 
  height:35px; 
  float:left; 
  text-align:center; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
  var speed=10; 
  var parent=document.getElementById("parent"); 
  var first=document.getElementById("first"); 
  var second=document.getElementById("second"); 
  second.innerHTML=first.innerHTML; 
  function done(){ 
    if(parent.scrollTop - first.offsetHeight >=0){ 
      parent.scrollTop-=second.offsetHeight; 
    } 
    else{ 
      parent.scrollTop++; 
    } 
  } 
  var MyMar=setInterval(done,speed); 
  parent.onmouseover=function(){clearInterval(MyMar)} 
  parent.onmouseout=function(){MyMar=setInterval(done,speed)} 
} 
</script> 
</head> 
<body> 
<div id="main"> 
  <div id="parent"> 
   <ul id="first"> 
    <li><img src="http://www.cnblogs.com/come-on/p/mytest/JS/ad_logo_1.gif" /></li> 
    <li><img src="http://www.cnblogs.com/come-on/p/mytest/JS/blogchina_logo_1.gif" /></li> 
    <li><img src="http://www.cnblogs.com/come-on/p/mytest/JS/cri_logo.jpg" /></li> 
    <li><img src="http://www.cnblogs.com/come-on/p/mytest/JS/dadushi_1.gif" /></li> 
    <li><img src="http://www.cnblogs.com/come-on/p/mytest/JS/daqi_logo.gif" /></li> 
    <li><img src="http://www.cnblogs.com/come-on/p/mytest/JS/dianping_Logo_66_23.gif" /></li> 
    <li><img src="http://www.cnblogs.com/come-on/p/mytest/JS/efulogo_88x31_1.gif" /></li> 
    <li><img src="http://www.cnblogs.com/come-on/p/mytest/JS/elady8831_1_1.gif" /></li> 
    <li><img src="http://www.cnblogs.com/come-on/p/mytest/JS/sina_lady_2.gif" /></li> 
    <li><img src="http://www.cnblogs.com/come-on/p/mytest/JS/uusee_logo_1.gif" /></li> 
    <li><img src="http://www.cnblogs.com/come-on/p/mytest/JS/ered_logo_1.gif" /></li> 
    <li><img src="http://www.cnblogs.com/come-on/p/mytest/JS/linklogo_me6623.gif" /></li> 
    <li><img src="http://www.cnblogs.com/come-on/p/mytest/JS/zgsslogo_1.jpg" /></li> 
    <li><img src="http://www.cnblogs.com/come-on/p/mytest/JS/singdao_logo_1.gif" /></li> 
   </ul> 
   <ul id="second"></ul> 
  </div> 
</div> 
</body> 
</html>

以上代码实现了图片不间断无缝垂直滚动效果,下面简单介绍一下它的实现过程:

一.实现原理:

为了实现图片向上滚动效果,当parent元素中的内容超过它的高度的时候,利用setInterval()函数周期性调用done()函数实现parent的scrollTop属性值不断增加的效果,这样就实现了滚动效果。为了实现无缝滚动,将first对象中的图片通过second.innerHTML=first.innerHTML复制一份放置于second对象中,这样当first对象向上滚动的时候,second对象就能够填补first对象后面原本会出现的空白区域,并且当parent的scrollTop属性值等于图first对象的宽度的时候,也就是first对象向上滚动被完全隐藏的时候,再将parent的scrollTop属性值重置为零,重新开始新的一轮滚动,如此往复。

二.代码注释:

1.window.onload=function(){}规定文档加载完成之后再去执行大括号中的代码。

2.var speed=10设置滚动速度,越大滚动的越慢。

3.var parent=document.getElementById("parent")获取parent对象。

4.var first=document.getElementById("first")获取first对象。

5.var second=document.getElementById("second")获取second对象。

6.second.innerHTML=first.innerHTML将first中的内容设置到second对象中去。

7.function done()声明一个函数用于实现滚动。

7.1.if(parent.scrollTop-first.offsetHeight>=0)判断parent的内容向上滚动的尺寸是否等于first对象的宽度,如果等于则通过parent.scrollTop-=second.offsetHeight语句将parent.scrollTop值设置为零,如果不相等则parent.scrollTop++,即继续向上滚动。

8.var MyMar=setInterval(done,speed)循环执行done()函数,并返回一个标识id值,以便clearInterval函数使用。

9.parent.onmouseover=function(){clearInterval(MyMar)}当鼠标放在parent对象的时候,停止滚动。

10. parent.onmouseout=function(){MyMar=setInterval(done,speed)}当鼠标离开的时候继续滚动。

原文地址是:http://www.51texiao.cn/javascriptjiaocheng/2015/0428/305.html

最为原始地址是:http://www.softwhy.com

关键词:图片 垂直 滚动 效果