js文本横向无缝滚动代码实例
分类：实例代码
文本无缝滚动是比较常见的应用，比如公司的新闻公告等等场景，实现此效果的方式有多种，下面简单介绍一下其中的一种，希望能够给需要的朋友带来帮助，代码实例如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>文本横向无缝滚动代码实例-前端教程网</title>
<style type="text/css">
#scrollobj{
white-space:nowrap;
overflow:hidden;
width:400px;
background-color:#CCC;
}
</style>
<script type="text/javascript">
function scroll(obj){
var tmp=(obj.scrollLeft)++;
if(obj.scrollLeft==tmp) {
obj.innerHTML+=obj.innerHTML;
}
if(obj.scrollLeft>=obj.firstChild.offsetWidth) {
obj.scrollLeft=0;
}
}
window.onload=function(){
var _timer=setInterval("scroll(scrollobj)",20);
scrollobj.onmouseover=_stop;
scrollobj.onmouseout=_start;
function _stop(){
if(_timer!= null){
clearInterval(_timer);
}
}
function _start() {
_timer=setInterval("scroll(document.getElementById('scrollobj'))",20);
}
}
</script>
</head>
<body>
<div id="scrollobj">前端教程网欢迎您，每一天都是新的，要珍惜当前的时间</div>
</body>
</html>
以上代码实现了我们的要求，文本可以实现无缝滚动效果,当鼠标移动到div上时，会停止滚动效果，当离开时滚动效果会继续。
js文本横向无缝滚动代码实例，这样的场景在实际项目中还是用的比较多的，关于js文本横向无缝滚动代码实例就介绍到这了。
js文本横向无缝滚动代码实例属于前端实例代码，有关更多实例代码大家可以查看。
