论坛徽章:: 0

电梯直达

1楼 [收藏(0)] [报告]

发表于 2008-03-24 21:17 |只看该作者 |倒序浏览

滚动板，还是自己写的，与网上的写法不同，IE和FF兼容～～多人回帖的话，再放些js特效

主页面板：
<iframe style="width:200px;height:600px;" frameborder="0" scrolling="no" src="roll.htm">
</iframe>
第二页面代码，要命名为roll.htm，在id=a的div标签对里加你喜欢的内容
<html>
<head>
<title></title>
</head>
<style>body{margin:0px;}</style>
<body>
<div id="a">
<div style="height:100px; background-color:#FFFFFF;"></div>
<div style="height:100px; background-color:#CCCCCC;"></div>
<div style="height:100px; background-color:#999999;"></div>
<div style="height:100px; background-color:#666666;"></div>
<div style="height:100px; background-color:#333333;"></div>
<div style="height:100px; background-color:#000000;"></div>
</div>
<div id="b"></div>
</body>
</html>
<script type="text/javascript">
var w=200; // 在这里调节滚动版的宽
var h=600; // 在这里调节滚动版的高
var speed=30; // 调节速度
var timer;
function mover()
{
var obj=document.getElementById("a");
var h=s_to_i(obj.style.height);
var y=s_to_i(obj.style.top);
var t=h+y
if(t<=0){y=h;
}else{
y=y-1;}
var obj2=document.getElementById("b");
var h2=s_to_i(obj2.style.height);
var y2=s_to_i(obj2.style.top);
var t2=h2+y2;
if(t2<=0){y2=h2;
}else{
y2=y2-1;}
obj.style.top=y+"px";
obj2.style.top=y2+"px";
timer=setTimeout("mover()",speed);
}
function stoper()
{
clearTimeout(timer);
}
function s_to_i(s)
{
var i=parseInt(s.substr(0,(s.length-2)));
return i;
}
window.onload=function()
{
var obj=document.getElementById("a");
var obj2=document.getElementById("b");
obj2.innerHTML=obj.innerHTML;
obj.style.position="absolute";
obj.style.width=w+"px";
obj.style.height=h+"px";
obj.style.top="0px";
obj2.style.position="absolute";
obj2.style.width=w+"px";
obj2.style.height=h+"px";
obj2.style.top=h+"px";
obj.onmouseover=stoper;
obj2.onmouseover=stoper;
obj.onmouseout=mover;
obj2.onmouseout=mover;
mover();
}
</script>

复制代码

文库|博客

xisimeng

白手起家

论坛徽章:: 0

2楼 [报告]

发表于 2008-03-25 15:40 |只看该作者

不错，那就有劳再多放几个吧！

实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？

返回列表

Chinaunix › 论坛 › 程序设计 › Web开发 › 第二段JS特效，share～

第二段JS特效，share～ [复制链接]

浏览过的版块