<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin: 0;padding: 0;font-style:normal;list-style: none;text-decoration: none;color:#666;font-size:14px;line-height: 24px;}
#box{margin: 0 auto;width:150px;height:100px;overflow: hidden;}
#box li{height:24px;line-height: 24px;}
</style>
</head>
<body>
<div id="box">
<ul id="con1">
<li><a href="#">1、喧豗阿达阿萨德啊</a></li>
<li><a href="#">2、喧豗阿达阿萨德啊</a></li>
<li><a href="#">3、喧豗阿达阿萨德啊</a></li>
<li><a href="#">4、喧豗阿达阿萨德啊</a></li>
<li><a href="#">5、喧豗阿达阿萨德啊</a></li>
<li><a href="#">6、喧豗阿达阿萨德啊</a></li>
<li><a href="#">7、喧豗阿达阿萨德啊</a></li>
<li><a href="#">8、喧豗阿达阿萨德啊</a></li>
<li><a href="#">9、喧豗阿达阿萨德啊</a></li>
</ul>
<!-- <ul id="con2"></ul> -->
</div>
<script>
var area = document.getElementById('box');
var liHeight = area.getElementsByTagName('li')[0].offsetHeight;
area.innerHTML += area.innerHTML;
area.scrollTop = 0;
var time;
var speed = 50;
var delay = 2000;
function startMove() {
area.scrollTop++;
time = setInterval(scrollUp, 50);
}
function scrollUp() {
if (area.scrollTop % liHeight === 0) {
clearInterval(time);
setTimeout(startMove, 100);
} else {
area.scrollTop++;
}
if (area.scrollTop >= area.scrollHeight / 2) {
area.scrollTop = 0;
}
}
setTimeout(startMove, 2000)
</script>
</body>
</html>原生js—信息滚动显示效果
猜你喜欢
转载自blog.csdn.net/weixin_40002964/article/details/88105237
今日推荐
周排行