新闻栏目三条信息切换

最新推荐文章于 2022-03-15 12:20:40 发布

osun2010

最新推荐文章于 2022-03-15 12:20:40 发布

阅读量720

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/osun2013/article/details/17463211

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

window.onload=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].onmouseover=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>