基於javascript實現文字無縫滾動效果
編輯：關於JavaScript
本文實例為大家分享了javascript實現文字無縫滾動的全部代碼，供大家參考，具體內容如下
效果圖：
實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{margin:0;padding:0;}
.div{margin:100px auto 0;width:350px;height:168px; background:#fff;border:5px solid #ccc; border-radius:5px; overflow:hidden;padding:5px; cursor: pointer;}
.div ul li{list-style:none;height:24px; line-height: 24px; text-overflow:ellipsis; font-size: 12px; white-space:nowrap; overflow: hidden;}
</style>
</head>
<body>
<div class="div" id="div">
<ul>
<li>1、分看見地上放聲大哭了范上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了德薩</li>
<li>2、分看見地上放聲大哭了范上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了德</li>
<li>3、分看見地聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了范德</li>
<li>4、分看見地上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了范德</li>
<li>5、分看見地上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了范德</li>
<li>6、分看見地上放聲大哭了范聲大哭了上放聲大哭了</li>
<li>7、分看見地上放聲大哭了上放聲大哭了上放聲大哭了范上放聲大哭了上放聲大哭了德</li>
<li>8、分看見地上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了范德</li>
</ul>
</div>
<script type="text/javascript">
var area = document.getElementById('div');
var iliHeight = 24;//單行滾動的高度
var speed = 50;//滾動的速度
var time;
var delay= 1000;
area.scrollTop=0;
area.innerHTML+=area.innerHTML;//克隆一份一樣的內容
function startScroll()
{
time=setInterval("scrollUp()",speed);
area.scrollTop++;
}
function scrollUp()
{
if(area.scrollTop % iliHeight==0)
{
clearInterval(time);
setTimeout(startScroll,delay);
}else{
area.scrollTop++;
if(area.scrollTop >= area.scrollHeight/2){
area.scrollTop =0;
}
}
}
setTimeout(startScroll,delay)
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家javascript程序設計有所幫助。
小編推薦
熱門推薦