javascript文本水平滚动代码实例
分类：实例代码
本本章节分享一段代码实例，它实现了文本水平滚动效果。
需要的朋友可以做一下参考，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
.pad_right{ padding-right:2em;}
#scroll_div {
height:26px;
overflow: hidden;
white-space: nowrap;
width:535px;
margin-left:10px;
}
#scroll_begin,#scroll_end {display: inline;}
</style>
<script type="text/javascript">
function ScrollImgLeft() {
var speed = 50;
var MyMar = null;
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML = scroll_begin.innerHTML;
function Marquee() {
if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0) {
scroll_div.scrollLeft -= scroll_begin.offsetWidth;
}
else {
scroll_div.scrollLeft++;
}
}
MyMar = setInterval(Marquee, speed);
scroll_div.onmouseover = function () {
clearInterval(MyMar);
}
scroll_div.onmouseout = function () {
MyMar = setInterval(Marquee, speed);
}
}
window.onload = function () {
ScrollImgLeft();
}
</script>
</head>
<body>
<div id="scroll_div" class="fl">
<div id="scroll_begin">
前端教程网提醒一 <span class="pad_right">只有努力奋斗才会有美好未来</span>
前端教程网提醒二 <span class="pad_right">没有人一开始就是高手</span>
前端教程网提醒三 <span class="pad_right">每一天都是新的必须要好好珍惜</span>
前端教程网提醒四 <span class="pad_right">分享和互助式进步的推动者</span>
前端教程网提醒五 <span class="pad_right">珍惜当下，因为其他的都是虚幻</span>
前端教程网提醒六 <span class="pad_right">认真的对待每一件事情</span>
前端教程网提醒七 <span class="pad_right">保重自己的身体</span>
</div>
<div id="scroll_end"></div>
</div>
</body>
</html>