代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body {
font-size: 12px
}
#container {
overflow: hidden;
height: 80px;
width: 280px;
margin: 90px auto;
position: relative;
}
#demo1 {
height: auto;
text-align: left;
}
#demo2 {
height: auto;
text-align: left;
}
#demo1 li,
#demo2 li {
list-style-type: none;
height: 22px;
text-align: left;
}
</style>
</head>
<body>
<div id="container">
<ul id="demo1">
<li>脚本之家欢迎您的到来</li>
<li>只有努力才会有美好的明天</li>
<li>没有人一开始就是高手，都是从菜鸟开始</li>
<li>每一天都是新的需要好好珍惜</li>
<li>怨天尤人是没有任何作用的</li>
<li>今天你写代码了吗</li>
<li>分享的胸怀和互助的精神最终成就了你</li>
</ul>
<div id="demo2">
</div>
</div>
<script type="text/javascript">
var speed = 200;
window.onload = function () {
var container = document.getElementById("container");
var demo2 = document.getElementById("demo2");
var demo1 = document.getElementById("demo1");
demo2.innerHTML = demo1.innerHTML;
function Marquee() {
console.log('跑马灯执行')
if (container.scrollTop >= demo1.offsetHeight) {
container.scrollTop = 0;
}
else {
container.scrollTop = container.scrollTop + 1;
}
}
var MyMar = setInterval(Marquee, speed);
//当鼠标移动的时候清空定时器
// container.onmouseover = function () {
// clearInterval(MyMar)
// };
// container.onmouseout = function () {
// alert('bbbb')
// MyMar = setInterval(Marquee, speed);
// };
}
</script>
</body>
</html>
网友评论