js上下无缝滚动代码

最新推荐文章于 2024-06-20 11:00:33 发布

鹰立如睡

最新推荐文章于 2024-06-20 11:00:33 发布

阅读量2.6k

点赞数

分类专栏： java web 文章标签： javascript

本文链接：https://blog.csdn.net/LVGAOYANH/article/details/52766416

版权

java web 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

上下滚动跟左右滚动的原理是一样的，但是有些细节需要注意，例如到底哪个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>

鹰立如睡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js上下无缝滚动代码

上下滚动跟左右滚动的原理是一样的，但是有些细节需要注意，例如到底哪个div需要左悬浮，我会标注出来，但是我还是不太能弄明白float这个属性<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>上下无缝滚动</title> </head> <body> <styl
复制链接

扫一扫

专栏目录