仿阿里巴巴搜索导航设计效果
作者:刘海民 来源:szrgb.net 发布时间:2008-04-15 15:01:00
不可否认,阿里巴巴走得越来越快也越来越好。技术的成熟让很多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我没有所以不知道效果如何。主要代码段我就简单的讲一下。详细代码我就不说了。毕竟大家都是高手了。嘿嘿!!
<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以下几个样式表示滑过不同时的不同样式:
.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;}
再用脚本控制:
// 此角本刘海民编写
// 主页: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
猜你喜欢
- em 和 strong 的区别,可以从三个层次上来谈。首先看 HTML 4.01 中的说明:EM: Indicates emphasis.S
- <%''调用例子'Dim int_RPP,int_Start,int_showNumberLink
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 20 - A Few Mootools Tabs项
- 无论是公司的同事还是外界的程序员朋友们,大部分人对JavaScript的高级应用不甚了解,已有的知识架构里会认为JavaScript仅仅是一
- 客户端调用XMLHTTP的过程很简单,只有5个步骤: 1、创建XMLHTTP对象 2、打开与服务端的连接,同时定义指令发送方式,服务网页(U
- 首先安装WSH,NT(SERVER、WORKSTATION)、W2K服务器上需要安装WSH2.0或者更高版本。然后,参照下列代码即可:<
- 有些时候(如开发聊天程序),我们需要将将滚动条(scrollbar)保持在最底部,比如聊天窗口,最新发出和收到的信息要显示在最下方,如果要看
- 我们在使用ASP 内置的ADO组件进行数据库编程时,通常是在脚本的开头打开一个连接,并在脚本的最后关闭它,但是就较大脚本而言,在多数情况下连
- 在VBScript中,有一个On Error Resume Next语句,它使脚本解释器忽略运行期错误并继续脚本代码的执行。接着该脚本可以检
- 如何取得刚添加的记录自动增加的ID字段的号码?我们用下面这个程序就行:rs(1)=oldrname &nb
- 这段时间在处理SQL server 2000 SP4补丁打不上的问题上花了不少时间,回头想想应该总结一下:系统说明:dell1800服务器,
- 一、介绍这篇文档旨在介绍如何安装配置基于2台服务器的MySQL集群。并且实现任意一台服务器出现问题或宕机时MySQL依然能够继续运行。虽然这
- 先来说eval的用法,内容比较简单,熟悉的可以跳过。eval函数接收一个参数s,如果s不是字符串,则直接返回s。否则执行s语句。如果s语句执
- 1> 如何在浏览器地址栏前添加自定义的小图标?你是不是记得有时在浏览网易网站的首页时,在地址WWW.PUTAOJIAYUAN.COM前
- 做WEB前台开发也有两年多,在开发中经常要涉及到DOM编程,我想大家也跟我一样,经常要处理各种DOM编程的操作,今天我就拿一个lightbo
- 近日大家热议的盗版XP黑屏问题想必很多人都知道了,在这里就不多说。据媒体报道,微软公司将实施逐步投放策略,预计本周将投放5%黑屏,下周投放2
- show parameter processes; 然后 更改系统连接数 alter system set processes=1000 s
- 一、Position1、语法:position:static/ absolute / fixed / relative2、参数:(1)sta
- Dreamweaver从出道以来,其简便易用而又功能强大的“行为”(Behavior)一直是大家所关注的热点之一。在Dreamweaver
- 我在Web服务器端安装了Web Server IIS4.0、Oracle Net8 for Client,并创建好了和Oracle8数据库的