淘宝顶部这个效果如何实现？

使用的JS文件
//此为读取对像涵数
function getObj(objName){return(document.getElementById(objName));}//些为搜索部分代码
var number=7;
var newid=1;//滑过效果
function searchchange(id){
  for(var i=1;i<=number;i++){
if(i==id) {
    if (i==newid){
       getObj("search"+i).className="yellowbg";
      }else{
  getObj("search"+newid).className="yellowbg";
  getObj("search"+i).className="qianyellowbg";
  }
           }
else{
     if(i==7 || i==(id-1)){
       getObj("search"+i).className="clybg";
   getObj("search"+newid).className="yellowbg";
   }
 else{
       getObj("search"+i).className="clybg";
   getObj("search"+newid).className="yellowbg";
   }
       }
     }
}//点击效果
function searchclick(id){
  for(var i=1;i<=number;i++){
if(i==id) {
       getObj("search"+i).className="yellowbg";
       getObj("myimg").className="searchunder" + i;
               getObj("hotword").innerHTML="<b>热门关键字：</b>"+id;
   newid=i;
           }
else{
     if(i==7 || i==(id-1)){
       getObj("search"+i).className="clybg";
       //getObj("myimg").className="searchunderother";
               //getObj("user"+i).className="use1";
   }
 else{
       getObj("search"+i).className="clybg";
       //getObj("myimg").className="searchunderother";
               // getObj("user"+i).className="use1";
   }
       }
     }
}//离开后效果
function searchfout(id){
  for(var i=1;i<=number;i++){
if(i==id) {
    if (i==newid){
       getObj("search"+i).className="yellowbg";
      }else{
  getObj("search"+newid).className="yellowbg";
  getObj("search"+i).className="clybg";
  }
           }
else{
     if(i==7 || i==(id-1)){
       getObj("search"+i).className="clybg";
   getObj("search"+newid).className="yellowbg";
   }
 else{
       getObj("search"+i).className="clybg";
   getObj("search"+newid).className="yellowbg";
   }
       }
     }
}使用的CSS
body{ margin:0px; text-align:center; background-image:url(../images/bgimg.gif)}#searchtop{margin:0px auto; width:770px; height:58px; !height:50px; text-align:center; background-color:#FFFFFF}
.clybg{display:block; margin:20px 0px 0px 0px; padding-top:15px; font-size:14px; float:left; width:93px; height:23px; background-image:url(../images/searchcly.gif); cursor:pointer}
.yellowbg{display:block;margin:20px 0px 0px 0px; padding-top:15px; font-size:14px; font-weight:bold; color:#FFFFFF; float:left; width:88px; height:23px; background-image:url(../images/searchyellow.gif); cursor:pointer}
.qianyellowbg{display:block; margin:20px 0px 0px 0px; padding-top:15px; font-size:14px; float:left; width:93px; height:23px; background-image:url(../images/searchqian.gif); cursor:pointer}
#searchunder{margin:0px auto; width:770px; height:auto; background:url(../images/searchbg.gif) left top no-repeat}
.searchunder1{margin:0px; width:610px; height:59px; padding:10px 80px; text-align:left; background:url(../images/underimg.gif) 70px top no-repeat; !background:url(../images/underimg.gif) 60px top no-repeat;}
.searchunder2{margin:0px; width:610px; height:59px; padding:10px 80px; text-align:left; background:url(../images/underimg.gif) 163px top no-repeat; !background:url(../images/underimg.gif) 153px top no-repeat;}
.searchunder3{margin:0px; width:610px; height:59px; padding:10px 80px; text-align:left; background:url(../images/underimg.gif) 256px top no-repeat; !background:url(../images/underimg.gif) 246px top no-repeat;}
.searchunder4{margin:0px; width:610px; height:59px; padding:10px 80px; text-align:left; background:url(../images/underimg.gif) 349px top no-repeat; !background:url(../images/underimg.gif) 339px top no-repeat;}
.searchunder5{margin:0px; width:610px; height:59px; padding:10px 80px; text-align:left; background:url(../images/underimg.gif) 442px top no-repeat; !background:url(../images/underimg.gif) 432px top no-repeat;}
.searchunder6{margin:0px; width:610px; height:59px; padding:10px 80px; text-align:left; background:url(../images/underimg.gif) 535px top no-repeat; !background:url(../images/underimg.gif) 525px top no-repeat;}
.searchunder7{margin:0px; width:610px; height:59px; padding:10px 80px; text-align:left; background:url(../images/underimg.gif) 628px top no-repeat; !background:url(../images/underimg.gif) 618px top no-repeat;}
.searchunderother{margin:0px; width:610px; height:59px; padding:10px 80px; text-align:left;}
.inputclass{ margin-left:50px; padding-top:4px;width:400px; height:16px; color:#999999; border:2px solid #A836BA}
#hotword{padding:5px; font-size:12px}

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    <title>可爱吧--教你做可爱女人--化妆 美容 美化 瘦身 护肤--深圳可爱吧</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="Keywords" content="设计,平面,网站设计,网站制作,平面设计,效果图制作,广告,论坛,网络代理,三原色设计,ups scs,degsin" />
    <meta name="Description" content="设计,平面,网站设计,网站制作,平面设计,效果图制作,广告,论坛,网络代理,三原色设计,ups scs,degsin" />
    <link href="style/styles.css" rel="stylesheet" type="text/css" />
    <script language="javascript" src="js/js.js"></script>
    </head><body>
    <!--网站分类搜索-->
    <div id="searchtop">
    <p id="search1" onclick="searchclick(1)" onmouseover="searchchange(1)" onmouseout="searchfout(1)" class="yellowbg" style="margin-left:70px;!margin-left:30px; ">服务搭配</p>
    <p id="search2" onclick="searchclick(2)" onmouseover="searchchange(2)" onmouseout="searchfout(2)" class="clybg">美容护肤</p>
    <p id="search3" onclick="searchclick(3)" onmouseover="searchchange(3)" onmouseout="searchfout(3)" class="clybg">化妆技巧</p>
    <p id="search4" onclick="searchclick(4)" onmouseover="searchchange(4)" onmouseout="searchfout(4)" class="clybg">美容造型</p>
    <p id="search5" onclick="searchclick(5)" onmouseover="searchchange(5)" onmouseout="searchfout(5)" class="clybg">纤纤瘦身</p>
    <p id="search6" onclick="searchclick(6)" onmouseover="searchchange(6)" onmouseout="searchfout(6)" class="clybg">生活情感</p>
    <p id="search7" onclick="searchclick(7)" onmouseover="searchchange(7)" onmouseout="searchfout(7)" class="clybg">女人沙龙</p>
    </div>
    <div id="searchunder">
    <div id="myimg" class="searchunder1">  <table width="90%"  border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><input name="textfield" type="text" class="inputclass" value="请输入查询内容！" /></td>
          <td><input type="image" src="images/search.gif" name="Submit" value="提交" /></td>
        </tr>
        <tr>
          <td id="hotword" colspan="2"><b>热门关键字：</b></td>
        </tr>
      </table>
    <label></label>
    <p></p>
    </div>
    </div>
    <!--网站广告位--></body>
    </html>