Js间断/连续的文字滚动代码

最新推荐文章于 2023-11-01 22:53:57 发布

ariss123

最新推荐文章于 2023-11-01 22:53:57 发布

阅读量230

点赞数

文章标签： JavaScript HTML5 jQuery CSS ViewUI

本文链接：https://blog.csdn.net/ariss123/article/details/84622615

版权

Js文字滚动代码，可设置间断滚动和连续滚动。滚动时是向上滚动的，控制Li列表滚动，兼容性表现地不错，兼容IE/火狐、Opera等浏览器，代码如下：前端框架分享

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>文字间隔滚动代码-兼容IE和FireFox</title>
<style type="text/css">
<!--
body {
	text-align:center;
}
ul{
margin:0px;
padding:0px;
list-style:none;
}
#andyscroll {
	overflow: hidden;
	background: #E8F8F8;
	padding: 0 10px;
	text-align: left;
	width:400px;
	height:100px;
	overflow:hidden;
}
#andyscroll a {
	font:12px/18px tahoma;
	color: #000; 
	float:left;
	width:100%;
	text-decoration: none;
	display:block;
}
#andyscroll a:hover {
	font:12px/18px tahoma;
	color: #F60;
}
-->
</style>
</head>
<body>
<div id="andyscroll">
<div id="scrollmessage">
<UL>
<li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
<li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
<li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
<li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
<li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>
<li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
<li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>
<li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
<ul>
</div>
</div>
<script type="text/javascript">
var stopscroll = false;
var scrollElem = document.getElementById("andyscroll");
var marqueesHeight = scrollElem.style.height;
scrollElem.onmouseover = new Function('stopscroll = true');
scrollElem.onmouseout  = new Function('stopscroll = false');
var preTop = 0;
var currentTop = 0;
var stoptime = 0;
var leftElem = document.getElementById("scrollmessage"); 
scrollElem.appendChild(leftElem.cloneNode(true));
init_srolltext();
function init_srolltext(){
	scrollElem.scrollTop = 0;
	setInterval('scrollUp()', 35);//确定滚动速度的, 数值越小, 速度越快
}
function scrollUp(){
	if(stopscroll) return;
	currentTop += 1; //设为1, 可以实现间歇式的滚动; 设为2, 则是连续滚动
	if(currentTop == 19) {
		stoptime += 1;
		currentTop -= 1;
		if(stoptime == 180) {
			currentTop = 0;
			stoptime = 0;
		}
	}else{
		preTop = scrollElem.scrollTop;
		scrollElem.scrollTop += 1;
		if(preTop == scrollElem.scrollTop){
			scrollElem.scrollTop = 0;
			scrollElem.scrollTop += 1;
		}
	}
}
</script>
</body>
</html>

ariss123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js间断/连续的文字滚动代码

Js文字滚动代码，可设置间断滚动和连续滚动。滚动时是向上滚动的，控制Li列表滚动，兼容性表现地不错，兼容IE/火狐、Opera等浏览器，代码如下：前端框架分享&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;文字间隔...
复制链接

扫一扫