<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>div position</title> <style type="text/css"> <!-- div{ line-height:20px; } body{ font-size:12px; } span{ background-image:url(square.gif); background-repeat:no-repeat; background-position:left; } a:link{ text-decoration: underline; color: #0000FF; } a:visited{ text-decoration: underline; color: #0000FF; } a:hover{ text-decoration: none; color: #FF0000; } a:active{ text-decoration: underline; } --> </style> <script type="text/javascript"> <!-- var interval=10000; //项目上滚的间隔 var speed=50; //项目上滚的速度 var num=3; //第次上滚的项目数 var k=0; var exit1,exit2; var ItemHeight=20; //每条项目的高度 var Item=new Array(); //定义数组Item用于存放链接文字 Item[0]="陈冠希接受律师道歉"; Item[1]="张学友南京个唱被索陪60万"; Item[2]="叶蓓解约华纳出书出碟"; Item[3]="毛阿敏女儿父亲身份成谜"; Item[4]="中央音乐学院附中成立50周年"; Item[5]="好男大逃杀前战淘汰一人"; Item[6]="Battle今日作客聊新浪歌会"; Item[7]="音乐剧碟拒绝赠票"; Item[8]="视频:李连杰做客杨澜访谈"; Item[9]="谢霆锋禁张柏芝工作"; var height=ItemHeight*Item.length; //最初所有项目的高度 var URL=new Array(); //定义数组URL用于存放链接地址 URL[0]="http://ent.sina.com.cn/y/p/2007-05-31/08181577112.html"; URL[1]="http://ent.sina.com.cn/y/2007-05-31/03491576986.html"; URL[2]="#"; URL[3]="#"; URL[4]="#"; URL[5]="http://ent.sina.com.cn/f/07myhero/index.shtml"; URL[6]="http://ent.sina.com.cn/y/2007-05-28/17471574065.html"; URL[7]="http://ent.sina.com.cn/s/m/2007-05-31/02491576947.html"; URL[8]="http://ent.sina.com.cn/m/c/bn/2007-05-31/065613510.html"; URL[9]="http://ent.sina.com.cn/s/h/2007-05-31/08311577115.html"; //用于添加一条新的项目,news为链接文字,url为链接地址 function AddItem(news,url){ Item[Item.length]=news; URL[URL.length]=url; height+=ItemHeight; } //在body中输出一个层div2 function drawdiv(){ document.write("<div id='div2' style='position:absolute; top:"+height+"px'></div>"); } //在层div1和div2上输出所有链接 function drawlink(){ for(var i=0;i<Item.length;i++){ div1.innerHTML+=" <span> <a target='_blank' onMouseOver='stopscroll()' onMouseOut='startscroll()' href=""+URL[i]+"" mce_href=""+URL[i]+"">"+Item[i]+"</a></span><br>" div2.innerHTML+=" <span> <a target='_blank' onMouseOver='stopscroll()' onMouseOut='startscroll()' href=""+URL[i]+"" mce_href=""+URL[i]+"">"+Item[i]+"</a></span><br>" } } //项目滚动函数 function doscroll(){ exit2=setTimeout("minscroll()",speed); if(div1.style.pixelTop<=-height) div1.style.pixelTop=height+div2.style.pixelTop; if(div2.style.pixelTop<=-height) div2.style.pixelTop=height+div1.style.pixelTop; exit1=setTimeout("doscroll()",interval) } //项目上滚子函数 function minscroll(){ div1.style.pixelTop-=2; div2.style.pixelTop-=2; k+=2; if(k==ItemHeight*num){ k=0; clearTimeout(exit2); } else exit2=setTimeout("minscroll()",speed); } //开始滚动函数,用于响应鼠标事件 function startscroll(){ exit2=setTimeout("minscroll()",500); exit1=setTimeout("doscroll()",interval); } //终止滚动函数,用于响应鼠标事件 function stopscroll(){ clearTimeout(exit2); clearTimeout(exit1); } //--> </script> </head> <body> <table cellpadding="0" cellspacing="0" width="200" height="225"> <tr height="25"> <td height="25" bgcolor="#9999CC">【最近更新】 <font color="#336666">what's news</font></td> </tr> <tr height="200"> <td height="200"> <div style="position:absolute; width:200px; height:200px; background-color:#EEEEEE; left: 10px; top: 40px; clip:rect('0','200','200','0'); overflow:hidden;"> <div id="div1" style="position:absolute; top:0px;"></div> <mce:script type="text/javascript"><!-- AddItem("张敬轩与蔬果亲密接触","#"); AddItem("四川长虹'BASIC'提升核心竞争力","http://www.funfei.com/news_view.asp?id=1263"); AddItem("猛料:范冰冰的男人有一个排!","http://www.funfei.com/forum_view.asp?forum_id=64&view_id=3520"); //…… 在此添加更多滚动项目 drawdiv(); drawlink(); startscroll(); // --></mce:script> </div> </td> </tr> </table> </body> </html> 很久以前(大约是2007年)写的了,现从新浪博客转过来。