共享一个仿阿里巴巴搜索效果,蛮漂亮的!

http://bbs.blueidea.com/thread-2755215-1-1.html

首先告诉大家一个前期效果浏览地址:

http://www.lovebars.cn/

不可否认，阿里巴巴走得越来越快也越来越好。技术的成熟让很多B2B B2C网站都在跟风学习它们。在这里我就来说一说它的搜索效果吧。如图所示：

看起来很不错吧，感觉很清爽。咦？？？不对，怎么在FF下看怎么下面那块没有了呢？怪！！！

在这里当然我不是研究这个问题，其实它们的搜索代码我都没有看，因为太乱，可能是自己水平低的原因吧。我的习惯是看到一个效果就想根据自己的思路做出来。不管是不是最优化的方法，只要自己做出来，那就会开心好几天！
因为一个小MM想做一个关于女性的网站玩一下。所以就请我帮她，并且她对阿里巴巴这个功能很是推崇，看阿里真得够帅，让我们的美女MM情有独衷。没办法尽量满足吧！谁让人家是美女呢！！！！

好，现在开始构思吧，因为最近在学习XHTML+CSS，不自觉得就想到了用DIV去构建，但是我发现鼠标滑动时下面的一个色块也会变化，这个就有点点难度了。要怎么实现呢？？？其实上面的效果我做过很多次了。虽说方法不是很漂亮，但是效果还是可以做出来，主要是下面要想个办法实现！
首先我想把前面的搜索框单独用一个浮动层来做，设置z-index:来达到在最上层。这样就可以在它下面放置一个层。专门显示那个色块如图：

就是后面那里。不过又深思一下不行，这样就太麻烦。而且设置浮动层在不同显示器和分辩率下会变形。方法不通呀！怎么办呢？？？
突然我想到了一个方法！！哈哈。我可以放二个层，最外面的层背景就设置为整体图片。如图：

接下来在层内部再放一个层做为容器，里面放那几个标签，而这个层呢。我们就用这个CSS样式来控制它的背景图。
.searchunder1{background:url(../images/underimg.gif) 60px top no-repeat;}

相信大家都明白是什么意思了吧。对，我们可以设置背景图片不重复，也可以设置它的位置，现在我们就可以通过不同的样式控制它背景在不同的位置。好了。其实就可以了。以下是我帮小MM做得效果！

这个现在可以兼容IE6 和FF2，至于IE7我没有所以不知道效果如何。主要代码段我就简单的讲一下。详细代码我就不说了。毕竟大家都是高手了。嘿嘿！！

QUOTE:

<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>

这一段实际上就是在最外面放一个DIV背景就是

再在里面放一个DIV以下几个样式表示滑过不同时的不同样式：

QUOTE:

.searchunder1{margin:0px; 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; 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; 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; 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; 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; 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; 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;}

再用脚本控制：

QUOTE:

// 此角本刘海民编写
// 主页：http://www.szrgb.net
// 博客：http://blog.szrgb.net

//此为读取对像涵数
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";
         }
         }
      }
}

好了。现在就可以了。具体源码可以在这里下载！

阿PAUL