不做解释，自己分析。
纵向滚动（代码有待完善）：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div style="overflow:hidden; width:171px; position:relative; height:265px; background-color:#CCC" οnmοuseοver="tzgd()" οnmοuseοut="jxgd()">
<div id="ss" style="position:absolute; width:140px; background-color:#CF3">
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td height="4" colspan="12" align="center"></td>
</tr>
<tr>
<td align="center">1111</td>
<td align="center">2222</td>
</tr>
<tr>
<td align="center">3333</td>
<td align="center">4444</td>
</tr>
<tr>
<td align="center">5555</td>
<td align="center">6666</td>
</tr>
</table></div>
<div id="ss2" style="position:absolute; width:140px; background-color:#009999">
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td height="4" colspan="12" align="center"></td>
</tr>
<tr>
<td align="center">1111</td>
<td align="center">2222</td>
</tr>
<tr>
<td align="center">3333</td>
<td align="center">4444</td>
</tr>
<tr>
<td align="center">5555</td>
<td align="center">6666</td>
</tr>
</table></div>
</div>
<script type="text/javascript">
var i,i2;
var tt;
var sj;
if (document.getElementById("ss").offsetHeight < 265)
{
document.getElementById("ss").style.height=265+"px";
}
if (document.getElementById("ss2").offsetHeight < 265)
{
document.getElementById("ss2").style.height=265+"px";
}
i=-(document.getElementById("ss").offsetHeight-265);
document.getElementById("ss").style.left=13+"px";
document.getElementById("ss2").style.left=13+"px";
document.getElementById("ss2").style.bottom=-document.getElementById("ss").offsetHeight+"px";
function gd()
{
document.getElementById("ss").style.bottom=i+"px";
i=i+1;
if ((document.getElementById("ss").style.bottom).replace(/px/,"") == 0)
{
i2=-document.getElementById("ss").offsetHeight;
sj=1;
}
if (sj==1)
{
document.getElementById("ss2").style.bottom=i2+"px";
i2=i2+1;
}
if ((document.getElementById("ss2").style.bottom).replace(/px/,"") == 0)
{
i=-document.getElementById("ss").offsetHeight;
}
}
tt=setInterval("gd()",1)
function tzgd()
{
clearInterval(tt);
}
function jxgd()
{
tt=setInterval("gd()",1);
}
</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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="demo5" style="OVERFLOW:hidden; width:100px;">
<table width="100%" border="0" align="left" cellPadding="0" cellspacing="0" cellspace="0">
<tr>
<td id="demo6" valign="top"><table cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td align="center"><div style="width:102px; height:102px; border:1px solid #e0e0e0; padding:5px 5px 5px 5px;"><img src="#" style="width:102px; height:102px;" /></div></td>
<td rowspan="2"><div style="width:23px; height:100%;"></div></td>
</tr>
<tr>
<td align="center">dd</td>
</tr>
</table></td>
<td id="demo7"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var dir2=1//每步移动像素，大＝快
var speed2=30//循环周期（毫秒）大＝慢
demo7.innerHTML=demo6.innerHTML
function Marquee2(){//正常移动
//alert(demo2.offsetWidth+"\n"+demo.scrollLeft)
if (dir2>0 && (demo7.offsetWidth-demo5.scrollLeft)<=0) demo5.scrollLeft=0
if (dir2<0 &&(demo5.scrollLeft<=0)) demo5.scrollLeft=demo7.offsetWidth
demo5.scrollLeft+=dir2
demo5.οnmοuseοver=function() {clearInterval(MyMar)}//暂停移动
demo5.οnmοuseοut=function() {MyMar=setInterval(Marquee2,speed2)}//继续移动
}
function r_left2(){if (dir2=-1)dir2=1}//换向左移
function r_right2(){if (dir2=1)dir2=-1}//换向右移
var MyMar=setInterval(Marquee2,speed2)
</script>
</body>
</html>
扫一扫
1609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
