上下翻滚的js滚动广告效果, 通过js操作table的position来实现。 运行代码运行代码 <script type="text/javascript"> </script> <HTML> <HEAD> <title>test</title> <style> #g_div{ text-align:right; overflow:hidden; } .b{ width:24px; height:16px; background:#737373; font-size:14px; font-weight:bold; color:#fff; text-decoration:none margin-left:1px; } .b:hover{ width:24px; height:16px; background:#780001; font-size:14px; font-weight:bold; color:#fff; text-decoration:none; margin-left:1px; } .bhover{ width:24px; height:16px; background:#780001; font-size:14px; font-weight:bold; color:#fff; text-decoration:none; margin-left:1px; } </style> </HEAD> <BODY> <div id="g_div" style="WIDTH:270px;HEIGHT:252px"> <a href="#" target="_blank"> <img id="g_img" style="BORDER-RIGHT:green 1px solid; BORDER-TOP:green 1px solid; FILTER:revealTrans(duration=1,transition=23); BORDER-LEFT:green 1px solid; WIDTH:266px; BORDER-BOTTOM:green 1px solid; HEIGHT:220px" src="http://zi.csdn.net/xian.gif"> </a> <a href="http://www.baidu.com/" for="http://pic.moobol.com/user_pic//070910/news/071023/s/153210223.jpg" target="_blank"> Tip 1 </a> <a href="http://www.126.com/" for="http://pic.moobol.com/user_pic//070213/hcwuzhanlong/071030/s/141331956.jpg" target="_blank"> Tip 2 </a> <a href="http://mp3.baidu.com/" for="http://pic.moobol.com/user_pic//070910/news/071023/s/154419597.jpg" target="_blank"> Tip 3 </a> <a href="http://post.baidu.com/" for="http://pic.moobol.com/user_pic//061013/keke/071030/s/173614548.jpg" target="_blank"> Tip 4 </a> <a href="http://top.baidu.com/" for="http://pic.moobol.com/user_pic//070612/pengshaojun/071030/s/115630736.JPG" target="_blank"> Tip 5 </a> </div> </BODY> </HTML> <script language="JavaScript"> function f(){ var g_sec=5; var g_items=new Array(); var g_div=document.getElementById("g_div"); var g_img=document.getElementById("g_img"); var g_imglink=g_img.parentElement; var arr=g_div.getElementsByTagName("A"); var arr_length=arr.length; var g_index=1; var show_img=function(n){ if(//d+/.test(n)){ var prev=g_index+1; g_index=n-1; } else{ var prev=(g_index>arr.length)?(arr_length-1):g_index+1; g_index=(g_index<arr_length-2)?(++g_index):0; } if(document.all){ g_img.filters.revealTrans.Transition=23; g_img.filters.revealTrans.apply(); g_img.filters.revealTrans.play(); } arr[prev].className="b"; arr[g_index+1].className="bhover"; g_img.src=g_items[g_index].img.src; g_img.title=g_items[g_index].txt; g_imglink.href=g_items[g_index].url; g_imglink.target=g_items[g_index].target; } for(var i=1;i<arr_length;i++){ g_items.push({txt:arr[i].innerHTML, url:arr[i].href, target:arr[i].target, img:(function(){var o=new Image;o.src=arr[i].getAttribute("for");return o})()}) arr[i].title=arr[i].innerHTML arr[i].innerHTML=[i," "].join("") arr[i].className="b" arr[i].οnclick=function(){ event.returnValue=false; show_img(event.srcElement.innerText) } } show_img(1); var t=window.setInterval(show_img,g_sec*1000) g_img.οnmοuseοver=function(){window.clearInterval(t)} g_img.οnmοuseοut=function(){t=window.setInterval(show_img,g_sec*1000)} } window.attachEvent("onload",f); </script>