无缝不间断图片垂直滚动效果
无缝不间断图片垂直滚动效果:
垂直滚动效果虽然使用频率没有水平滚动高，不过也有大量的使用，例如垂直滚动的友情链接效果，下面就结合实例简单介绍一下如何实现此效果，代码实例如下:
<!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="mytest/JS/ad_logo_1.gif" /></li>
<li><img src="mytest/JS/blogchina_logo_1.gif" /></li>
<li><img src="mytest/JS/cri_logo.jpg" /></li>
<li><img src="mytest/JS/dadushi_1.gif" /></li>
<li><img src="mytest/JS/daqi_logo.gif" /></li>
<li><img src="mytest/JS/dianping_Logo_66_23.gif" /></li>
<li><img src="mytest/JS/efulogo_88x31_1.gif" /></li>
<li><img src="mytest/JS/elady8831_1_1.gif" /></li>
<li><img src="mytest/JS/sina_lady_2.gif" /></li>
<li><img src="mytest/JS/uusee_logo_1.gif" /></li>
<li><img src="mytest/JS/ered_logo_1.gif" /></li>
<li><img src="mytest/JS/linklogo_me6623.gif" /></li>
<li><img src="mytest/JS/zgsslogo_1.jpg" /></li>
<li><img src="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.softwhy.com
相关文章
最新发布
阅读排行
热门文章
猜你喜欢