共享一个仿阿里巴巴搜索效果,蛮漂亮的!
http://bbs.blueidea.com/thread-2755215-1-1.html
首先告诉大家一个前期效果浏览地址:
http://www.lovebars.cn/
不可否认,阿里巴巴走得越来越快也越来越好。技术的成熟让很多B2B B2C网站都在跟风学习它们。在这里我就来说一说它的搜索效果吧。如图所示:
![](http://office.szrgb.net/szrgb/uploadfile/200768192954449.JPG)
看起来很不错吧,感觉很清爽。咦???不对,怎么在FF下看怎么下面那块没有了呢?怪!!!
在这里当然我不是研究这个问题,其实它们的搜索代码我都没有看,因为太乱,可能是自己水平低的原因吧。我的习惯是看到一个效果就想根据自己的思路做出来。不管是不是最优化的方法,只要自己做出来,那就会开心好几天!
因为一个小MM想做一个关于女性的网站玩一下。所以就请我帮她,并且她对阿里巴巴这个功能很是推崇,看阿里真得够帅,让我们的美女MM情有独衷。没办法尽量满足吧!谁让人家是美女呢!!!!
好,现在开始构思吧,因为最近在学习XHTML+CSS,不自觉得就想到了用DIV去构建,但是我发现鼠标滑动时下面的一个色块也会变化,这个就有点点难度了。要怎么实现呢???其实上面的效果我做过很多次了。虽说方法不是很漂亮,但是效果还是可以做出来,主要是下面要想个办法实现!
首先我想把前面的搜索框单独用一个浮动层来做,设置z-index:来达到在最上层。这样就可以在它下面放置一个层。专门显示那个色块如图:
![](http://office.szrgb.net/szrgb/uploadfile/200768193310581.JPG)
就是后面那里。不过又深思一下不行,这样就太麻烦。而且设置浮动层在不同显示器和分辩率下会变形。方法不通呀!怎么办呢???
突然我想到了一个方法!!哈哈。我可以放二个层,最外面的层背景就设置为整体图片。如图:
接下来在层内部再放一个层做为容器,里面放那几个标签,而这个层呢。我们就用这个CSS样式来控制它的背景图。
.searchunder1{background:url(../images/underimg.gif) 60px top no-repeat;}
相信大家都明白是什么意思了吧。对,我们可以设置背景图片不重复,也可以设置它的位置,现在我们就可以通过不同的样式控制它背景在不同的位置。好了。其实就可以了。以下是我帮小MM做得效果!
![](http://office.szrgb.net/szrgb/uploadfile/20076819353899.JPG)
这个现在可以兼容IE6 和FF2,至于IE7我没有所以不知道效果如何。主要代码段我就简单的讲一下。详细代码我就不说了。毕竟大家都是高手了。嘿嘿!!
这一段实际上就是在最外面放一个DIV背景就是
再在里面放一个DIV以下几个样式表示滑过不同时的不同样式:
再用脚本控制:
好了。现在就可以了。具体源码可以在这里下载!
阿PAUL![](http://bbs.blueidea.com/images/blue/smilies/biggrin.gif)
首先告诉大家一个前期效果浏览地址:
http://www.lovebars.cn/
不可否认,阿里巴巴走得越来越快也越来越好。技术的成熟让很多B2B B2C网站都在跟风学习它们。在这里我就来说一说它的搜索效果吧。如图所示:
看起来很不错吧,感觉很清爽。咦???不对,怎么在FF下看怎么下面那块没有了呢?怪!!!
在这里当然我不是研究这个问题,其实它们的搜索代码我都没有看,因为太乱,可能是自己水平低的原因吧。我的习惯是看到一个效果就想根据自己的思路做出来。不管是不是最优化的方法,只要自己做出来,那就会开心好几天!
因为一个小MM想做一个关于女性的网站玩一下。所以就请我帮她,并且她对阿里巴巴这个功能很是推崇,看阿里真得够帅,让我们的美女MM情有独衷。没办法尽量满足吧!谁让人家是美女呢!!!!
好,现在开始构思吧,因为最近在学习XHTML+CSS,不自觉得就想到了用DIV去构建,但是我发现鼠标滑动时下面的一个色块也会变化,这个就有点点难度了。要怎么实现呢???其实上面的效果我做过很多次了。虽说方法不是很漂亮,但是效果还是可以做出来,主要是下面要想个办法实现!
首先我想把前面的搜索框单独用一个浮动层来做,设置z-index:来达到在最上层。这样就可以在它下面放置一个层。专门显示那个色块如图:
就是后面那里。不过又深思一下不行,这样就太麻烦。而且设置浮动层在不同显示器和分辩率下会变形。方法不通呀!怎么办呢???
突然我想到了一个方法!!哈哈。我可以放二个层,最外面的层背景就设置为整体图片。如图:
.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>
<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; 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;}
.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;}
再用脚本控制:
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";
}
}
}
}
// 主页: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
![](http://bbs.blueidea.com/images/blue/smilies/biggrin.gif)