window.οnlοad=function(){
var ele=document.getElementByIdx_x_x("description");
var w=ele.clientWidth;
var n=20,t=20;
var timers=new Array(n);
var c=document.getElementByIdx_x_x("beni").getElementsByTagName_r("li");
for(var i=0;i<c.length;i++){
c[i].index=i;
c[i].οnmοuseοver=doSlide;
}
c=null;
function doSlide(){
var x=ele.scrollLeft;
var d=this.index*w-x;
if(!d) return;
for(var i=0;i<n;i++)(function(){
if(timers[i])
clearTimeout(timers[i]);
var j=i;
timers[i]=setTimeout(function(){
ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));
},(i+1)*t);
})();
<!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>Js切换菜单</title> <style type="text/css"> #focus { min-height: 100px; width: 100%; height: 100px } #beni { margin: 0px; width: 250px; padding-top: 0px; list-style-type: none; top: 15px; width:90px; height:25px; float:right; } #beni li { border-top: #fff 1px solid; font-size: 12px; width: 26px; float:left; width:24px; height:5px; display:block; border:0px; } #beni li.first { border-top: 0px } #beni li a { display: block; margin: 0px; border-left: 0px; padding-top: 0px; border-bottom: 0px; text-decoration: none; float:left; width:24px; height:5px; display:block; background:url(http://demo.eastdays.com/fineart_new/images/list_b.jpg) no-repeat; border:0px; } #beni li a:hover { background: #f9f9f9; width:24px; height:5px; display:block; background:url(http://demo.eastdays.com/fineart_new/images/lista.jpg) no-repeat; border:0px; } #description { width:630px; height:100px; overflow:hidden; } A:link { COLOR: #666666; TEXT-DECORATION: none } A:visited { COLOR: #666666; TEXT-DECORATION: none } A:hover { COLOR: #666666; TEXT-DECORATION: none } A:active { COLOR: #666666; TEXT-DECORATION: none } </style> </head> <body>
<div style="width:630px; height:150px; left:50px;position:absolute; z-index:2; text-align:left"> <div id=description> <div style="width:6000px; height:100px;"> <div style=" width:180px; float:left; height:100px; margin:0px 20px 0px 10px;"> <div style="margin:5px 0px; color:#606060; font-weight:bold;">2011-1-27</div> <div style="margin:5px 0px; color:#eb0101;">范雅壁纸致全国范雅人新年贺词</div> <div style="margin:5px 0px;color:#797979;"><a href="new1.asp?id=19">各位范雅人:祥虎辞岁,玉兔迎门。伴随着新春的喜庆气息,我们...</a></div> </div> <div style=" width:180px; float:left; height:100px; margin:0px 20px 0px 10px;"> <div style="margin:5px 0px; color:#606060; font-weight:bold;">2011-1-27</div> <div style="margin:5px 0px; color:#eb0101;">范雅壁纸新春新品震撼巨献,谜底即将揭晓</div> <div style="margin:5px 0px;color:#797979;"><a href="new1.asp?id=18">继2010年震撼推出PVC及立体无纺布系列版本,获得市场热...</a></div> </div> <div style=" width:180px; float:left; height:100px; margin:0px 20px 0px 10px;"> <div style="margin:5px 0px; color:#606060; font-weight:bold;">2011-1-26</div> <div style="margin:5px 0px; color:#eb0101;">范雅壁纸立体无纺布新品震撼上市</div> <div style="margin:5px 0px;color:#797979;"><a href="new1.asp?id=17">本季,范雅壁纸除了精品PVC版本外,还震撼推出了全新立体无...</a></div> </div> <div style=" width:180px; float:left; height:100px; margin:0px 20px 0px 10px;"> <div style="margin:5px 0px; color:#606060; font-weight:bold;">2011-1-26</div> <div style="margin:5px 0px; color:#eb0101;">范雅壁纸PVC新品震撼上市</div> <div style="margin:5px 0px;color:#797979;"><a href="new1.asp?id=16">该版本系范雅壁纸中高档家用PVC壁纸系列,它以珠光、金属等...</a></div> </div> <div style=" width:180px; float:left; height:100px; margin:0px 20px 0px 10px;"> <div style="margin:5px 0px; color:#606060; font-weight:bold;">2011-1-24</div> <div style="margin:5px 0px; color:#eb0101;">范雅壁纸全年新品推出计划</div> <div style="margin:5px 0px;color:#797979;"><a href="new1.asp?id=13">以打造世界一流壁纸品牌为己任的范雅壁纸,为了加速推动集团产...</a></div> </div> </div> </div> <div style="width:630px; height:5px; margin-top:10px;"> <ul id=beni> <li class=first><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div></div></body></html>