直接上代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
* {
margin: 0;
padding: 0
}
#slide {
position: absolute;
height: 300px;
width: 260px;
overflow: hidden;
border: 1px solid red;
}
#slide p {
height: 34px;
line-height: 34px;
overflow: hidden;
border:1px solid blue;
}
#slide span {
float: right
}
</style>
</head>
<body>
<div id="slide">
<div id="slide1">
<p>11111111111111111*</p>
<p>222222222222222222</p>
<p>33333333333333333333</p>
<p>3333333333333333333333</p>
<p>444444444444444444</p>
<p>55555555555555555555555555</p>
<p>666666666666666666666666666666</p>
<p>777777777777777777777777*</p>
<p>88888888888888888</p>
</div>
<div id=slide2></div>
</div>
<script>
let speed = 80
let slide = document.getElementById("slide");
let slide2 = document.getElementById("slide2");
let slide1 = document.getElementById("slide1");
slide2.innerHTML = slide1.innerHTML
function rowUp() {
// console.log(slide.scrollTop);
// console.log( slide1.offsetHeight);
// console.log(slide2.offsetTop );
// console.log('------')
// 这里的算法就是通过第二个的高度与父顶上去了多少进行比较
if (slide2.offsetTop - slide.scrollTop <= 0)
slide.scrollTop -= slide1.offsetHeight
else {
slide.scrollTop++
}
}
let timer = setInterval(rowUp, speed)
slide.onmouseover = function () { clearInterval(timer) }
slide.onmouseout = function () { timer = setInterval(rowUp, speed) }
</script>
</body>
</html>
网友评论