兼容firefox/oprea/IE的无缝滚动

最新推荐文章于 2024-05-22 16:48:47 发布

RemanticMemory

最新推荐文章于 2024-05-22 16:48:47 发布

阅读量1k

点赞数

分类专栏： HTML经典文章标签： opera 互联网 function 测试 ie firefox

HTML经典专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天在蓝色上看到的，收集过来，肯定用的到这种滚动效果，可以很好的节省屏幕空间，而且去掉了marquee的空白（印象中firefox不支持morquee）
第一段连续滚动

<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>

这一段可以控制连续滚动或者是间歇滚动

<!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();

RemanticMemory

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
兼容firefox/oprea/IE的无缝滚动

今天在蓝色上看到的，收集过来，肯定用的到这种滚动效果，可以很好的节省屏幕空间，而且去掉了marquee的空白（印象中firefox不支持morquee）第一段连续滚动西邮评估网#demo a { width:100%; overflow:hidden; font:12px/16px tahoma; display:block; text-decoration:none; margin:2px;
复制链接

扫一扫