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>
Js间断/连续的文字滚动代码,布布扣,bubuko.com
Js间断/连续的文字滚动代码
原文:http://blog.csdn.net/ariss123/article/details/38386271