【网页特效代码-文字特效】CSS+JS连续向上滚动的文字

<!DOCTYPE html>
<html lang="en">
<head>
<title>【网页特效代码-文字特效】CSS+JS连续向上滚动的文字</title>
<meta http-equiv="Content-Type" charset='utf-8'>
</head>
<body>
<style type="text/css">
* { margin:0; padding:0; font-size:12px; }
#scrollBox2
{
width:400px;
height:80px;
line-height:20px;
overflow:hidden;
margin:10px;
}</style>
<p>每屏四行：</p>
<div id="scrollBox">
<ul>
<li><a href="" target="_blank">我有一个梦像雨后彩虹</a></li>
<li><a href="" target="_blank">用所有泪水换来笑容</a></li>
<li><a href="" target="_blank">还有一种爱穿越了人海</a></li>
<li><a href="" target="_blank">拾起那颗迷失的尘埃</a></li>
<li><a href="" target="_blank">你的呼吸越靠越近</a></li>
<li><a href="" target="_blank">将我抱紧</a></li>
<li><a href="" target="_blank">我睁开双眼想你在身边</a></li>
<li><a href="" target="_blank">无所谓永远还是瞬间</a></li>
<li><a href="" target="_blank">静闭上了眼你却又浮现</a></li>
<li><a href="" target="_blank">带我远离寂寞的边缘</a></li>
<li><a href="" target="_blank">忘了是非没有伤悲</a></li>
<li><a href="" target="_blank">无怨无悔</a> </li>
</ul>
</div>
<script type="text/javascript">
function Dron_ScrollBox(uid) {
this.scrollBox = document.getElementById(uid);
this.scrollBoxHeight = this.scrollBox.clientHeight;
this.scrollBoxInner = this.scrollBox.innerHTML;
this.scrollCol = this.scrolln = 0;
this.setScroll = function () {
this.scrollBox.scrollTop = this.scrollCol + this.scrolln;
if (this.scrolln == this.scrollBoxHeight)
return this.addScroll()
else
this.scrolln++;
var o = this;
function m() { o.setScroll(); }
setTimeout(m, 40);
}
this.addScroll = function () {
this.scrollBox.innerHTML += "<br />" + this.scrollBoxInner;
this.scrollCol = this.scrollBox.scrollTop;
this.scrolln = 0;
var o = this;
function m() { o.setScroll(); }
setTimeout(m, 2000);
}
this.init = this.addScroll;
}
//类的调用方法
new Dron_ScrollBox("scrollBox").init();
</script>
</body>

</html>

【网页特效代码-文字特效】CSS+JS连续向上滚动的文字

猜你喜欢