[脚本]兼容IE, FF, Opera的无缝滚动效果……

代码1:

<!--现在文本的总高度是10*(16+2*2)=200,所以外框的高度不能大于200px;-->
<html>
<HEAD>
<TITLE>西邮评估网</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>
#demo a {
width:100%;
overflow:hidden;
font:12px/16px tahoma;
display:block;
text-decoration:none;
margin:2px;
color:#4a551c;
padding-left:2px;
text-align:left;
}
#demo a:hover {
color:#ff6600;
}
</STYLE>
</HEAD>
<body>
<div id="demo" style="overflow:hidden;height:132px;width:400px; border:1px solid #dde5bc; overflow:hidden;">
<div id=demo1>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网,我只不过稍加整理,希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网,我只不过稍加整理,希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网,我只不过稍加整理,希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网,我只不过稍加整理,希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网,我只不过稍加整理,希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网,我只不过稍加整理,希望大家多提意件……</a>
</div>
<div id=demo2></div>
</div>
<script>
var speed=40
var demo=document.getElementById("demo");
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>

代码2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>21Andy.com - 兼容IE和FireFox的间隔滚动代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
body {
text-align:center;
}
#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">
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网,我只不过稍加整理,希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网,我只不过稍加整理,希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网,我只不过稍加整理,希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网,我只不过稍加整理,希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网,我只不过稍加整理,希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
<a href="#">代码来自互联网,我只不过稍加整理,希望大家多提意件……</a>
</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()', 25);//的面的这个参数25, 是确定滚动速度的, 数值越小, 速度越快
}
function scrollUp(){
if(stopscroll) return;
currentTop += 2; //设为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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值