Js间断/连续的文字滚动代码
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>一、推荐使用迅雷或快车等多线程下载软件下载本站资源。
二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。
三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!
四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.
五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。
六、如需转载本站资源,请注明转载来自并附带链接
七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com
大家评论
站长推荐
