js,html页面循环滚动 ie浏览器
时间: 2023-08-05 08:37:57 浏览: 96
如果您需要在IE浏览器中实现循环滚动,可以使用以下代码:
```
<!DOCTYPE html>
<html>
<head>
<title>循环滚动</title>
<style type="text/css">
#container {
height: 200px;
overflow: hidden;
position: relative;
}
#list {
height: 200px;
position: absolute;
top: 0;
left: 0;
}
#list li {
height: 50px;
line-height: 50px;
}
#list li:first-child {
margin-top: 0;
}
</style>
</head>
<body>
<div id="container">
<ul id="list">
<li>第一条内容</li>
<li>第二条内容</li>
<li>第三条内容</li>
<li>第四条内容</li>
<li>第五条内容</li>
<li>第六条内容</li>
<li>第七条内容</li>
<li>第八条内容</li>
<li>第九条内容</li>
<li>第十条内容</li>
</ul>
</div>
<script type="text/javascript">
var timer = setInterval(function () {
var container = document.getElementById('container');
var list = document.getElementById('list');
var firstItem = list.getElementsByTagName('li')[0];
var height = firstItem.offsetHeight;
list.style.top = -height + 'px';
container.appendChild(firstItem);
list.style.transition = 'top 0.5s ease-in-out';
list.style.top = 0;
}, 2000);
</script>
</body>
</html>
```
这段代码使用了CSS和JavaScript来实现循环滚动效果。其中,通过设置容器的高度和overflow:hidden来隐藏超出容器高度的内容;通过设置列表项的position:absolute和top:0来让列表项相对于容器顶部对齐;通过JavaScript设置定时器来定时滚动列表,并通过appendChild方法将第一个列表项添加到容器末尾,从而实现循环滚动的效果。
阅读全文