JavaScript实现跑马灯效果
作者:
幻凌风 | 来源:发表于
2017-08-18 22:10 被阅读20次<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#msg{
position:absolute;
background-color:deepskyblue;
color:white;
border:1px solid red;
width:80px;
}
</style>
<script>
var left = 0;
var direction = 1;
window.onload = function () {
//定时执行run函数，移动位置
setInterval(run, 100);
}
function run() {
left += 10 * direction;
//判断宽度：小于浏览器窗口宽度
if (left + 80 >= window.innerWidth) {
//到达最右侧时
direction = -1;
}
if (left <= 0) {
//到达最左侧时
direction = 1;
}
var msg = window.document.getElementById("msg");
msg.style.left = left + "px";
}
</script>
</head>
<body>
<div id="msg">跑马灯文本</div>
</body>
</html>
本文标题：JavaScript实现跑马灯效果
本文链接：https://www.haomeiwen.com/subject/uqdzrxtx.html
网友评论