您的位置：首页 > Web前端 > JavaScript

js上下无缝滚动代码

2016-10-09 14:21 232 查看

上下滚动跟左右滚动的原理是一样的，但是有些细节需要注意，例如到底哪个div需要左悬浮，我会标注出来，但是我还是不太能弄明白float这个属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上下无缝滚动</title>
</head>
<body>
<style type="text/css">

#demo {

background: #FFF;
border: 3px solid black;
height: 200px;
width: 650px;
overflow:hidden;
}
#demo img {
}
#indemo {
width: 800%;
border: 3px solid yellow;
}
#demo1 {
//no float
border: 3px solid blue;
}
#demo2 {
//no float
border: 3px solid red;
}

</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="img/2.jpg" border="0"/></a>
<a href="#"><img src="img/3.jpg" border="0"/></a>
</div>

<div id="demo2"></div>
</div>
</div>
<script>

var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetHeight-tab.scrollTop>=0)
{
//alert("tab2.offsetHeight"+tab2.offsetHeight+"\n"+
"tab.scrollTop"+tab.scrollTop+"\n");
tab.scrollTop++;
}
else{//第一个恰好滑完
tab.scrollTop-=tab1.offsetHeight//返回至开头处
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航