文字滚动效果控制单排向上间隔滚动-网页编程网

当前位置：主页 >> 网页特效 >> 正文

文字滚动效果控制单排向上间隔滚动

阅读：4280 输入：2014-10-21 01:59:40

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js文字滚动制作js scroll单排文字滚动向上间隔滚动_特效网</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
#scrollWrap{width:300px;height:18px;overflow:hidden;background:#E6F6F6;}
#scrollMsg li{height:18px;line-height:18px;overflow:hidden;font-size:12px;padding:0 10px;} 
</style>
</head>
<body>
<div id="scrollWrap"> 
	<ul id="scrollMsg"> 
		<li><a href="#">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></li>
		<li><a href="#">javascript滚动图片带按钮控制上下左右自动无缝滚动</a></li>
		<li><a href="#">javascript滚动图片按钮控制图片左右自动滚动</a></li>
		<li><a href="#">js选项卡类似js导航菜单的js tab选项卡切换效果</a></li>
	</ul>
</div> 
<script type="text/javascript">
try{ 
	var isStoped = false; 
	var oScroll = document.getElementById("scrollWrap"); 
	with(oScroll){ 
		noWrap = true; 
	} 
	oScroll.onmouseover = new Function('isStoped = true'); 
	oScroll.onmouseout = new Function('isStoped = false'); 
	var preTop = 0; 
	var curTop = 0; 
	var stopTime = 0; 
	var oScrollMsg = document.getElementById("scrollMsg");
	oScroll.appendChild(oScrollMsg.cloneNode(true)); 
	init_srolltext();
}catch(e){} 
function init_srolltext(){ 
	oScroll.scrollTop = 0; 
	setInterval('scrollUp()', 15); 
}
function scrollUp(){ 
	if(isStoped)
	return; 
	curTop += 1; 
	if(curTop == 19){ 
		stopTime += 1; 
		curTop -= 1; 
		if(stopTime == 180){ 
			curTop = 0; 
			stopTime = 0; 
		} 
	}else{ 
		preTop = oScroll.scrollTop; 
		oScroll.scrollTop += 1; 
		if(preTop == oScroll.scrollTop){ 
			oScroll.scrollTop = 0; 
			oScroll.scrollTop += 1; 
		} 
	} 
}
</script>
</body>
</html>

相关阅读: 图片不间断无缝滚动特效大全; js实现公告文字标题无缝向上滚动特效; 带关闭功能全屏漂浮广告图片