javascript 向上滚动表格

最新推荐文章于 2024-10-14 16:30:15 发布

Sunny_can

最新推荐文章于 2024-10-14 16:30:15 发布

阅读量647

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/can_Sunshine/article/details/52662662

版权

javascript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.con{
width: 50%;
margin: 0 auto;
height: 400px;
overflow: hidden;
position: relative;
}
li{
list-style: none;
border: 1px solid deeppink;
height: 26px;
}
.info1{
margin: 10px auto;
}
</style>
</head>
<body>
<div id="con" class="con">
<ul class="info1">
<li>
李**1
山西职业技术学院
应用电子
合荣欣业
8000
北京
2015-08-13
</li>
<li>
李**2
山西职业技术学院
应用电子
合荣欣业
8000
北京
2015-08-13
</li>
<li>
李**3
山西职业技术学院
应用电子
合荣欣业
8000
北京
2015-08-13
</li>
<li>
李**4
山西职业技术学院
应用电子
合荣欣业
8000
北京
2015-08-13
</li>
<li>
李**5
山西职业技术学院
应用电子
合荣欣业
8000
北京
2015-08-13
</li>
<li>
李**6
山西职业技术学院
应用电子
合荣欣业
8000
北京
2015-08-13
</li>
<li>
李**7
山西职业技术学院
应用电子
合荣欣业
8000
北京
2015-08-13
</li>
<li>
李**8
山西职业技术学院
应用电子
合荣欣业
8000
北京
2015-08-13
</li>
<li>
李**9
山西职业技术学院
应用电子
合荣欣业
8000
北京
2015-08-13
</li>
<li>
李**10
山西职业技术学院
应用电子
合荣欣业
8000
北京
2015-08-13
</li>
<li>
李**11
山西职业技术学院
应用电子
合荣欣业
8000
北京
2015-08-13
</li>
<li>
李**12
山西职业技术学院
应用电子
合荣欣业
8000
北京
2015-08-13
</li>
<li>
李**13
山西职业技术学院
应用电子
合荣欣业
8000
北京
2015-08-13
</li>
<li>
李**14
山西职业技术学院
应用电子
合荣欣业
8000
北京
2015-08-13
</li>
</ul>
<ul class="info2"></ul>
</div>

<script>
var timer;
var con=document.getElementById("con");
var ul=document.getElementsByClassName("info1").item(0);
var ul2=document.getElementsByClassName("info2").item(0);
ul2.innerHTML=ul.innerHTML;

function scllo(){
if (ul.offsetHeight <= con.scrollTop) { //392==392
// con.scrollTop -= ul2.offsetHeight; //con.scrollTop=0
con.scrollTop = 0;
}
else {
con.scrollTop++;
console.log(con.scrollTop);
}
}

timer=setInterval(scllo,40);
con.οnmοuseοut= function () {
timer=setInterval(scllo,40);
};

//鼠标移上去停止
con.οnmοusemοve= function () {
clearInterval(timer);
};

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