“滑动门技术”仿淘宝网站的导航标签效果
时间：2006-11-01 来源：w3g8
这种是叫做“滑动门技术”。
不过，这种叫法有点夸大的嫌疑。因为本来就是很简单的一个小技巧而已，算不上什么特别的技术。
说白了，滑动门技术就是：叠加2个背景。
再详细点就是，给设置一个左背景，然后在a里面增加一个右浮动的，给它设置一个右背景。这样就可以用a的伪类hover来实现鼠标放上去，菜单背景的替换效果了。
!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=gb2312" />
title>无标题文档/title>
style type="text/css">
/style>
script language="javascript">
function switchTag(tag,content)
{
// alert(tag);
// alert(content);
for(i=1; i 6; i++)
{
if ("tag"+i==tag)
{
document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i;
}else{
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
}
if ("content"+i==content)
{
document.getElementById(content).className="";
}else{
document.getElementById("content"+i).className="hidecontent";
}
document.getElementById("content").className=content;
}
}
/script>
/head>
body>
div id="container">
div id="title">
ul>
li id="tag1">a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1">span class="selectspan1">首页/span>/a>/li>
li id="tag2">a href="#" onclick="switchTag('tag2','content2');this.blur();">span>下载中心/span>/a>/li>
li id="tag3">a href="#" onclick="switchTag('tag3','content3');this.blur();">span>产品介绍/span>/a>/li>
li id="tag4">a href="#" onclick="switchTag('tag4','content4');this.blur();">span>会员注册与登录/span>/a>/li>
li id="tag5">a href="#" onclick="switchTag('tag5','content5');this.blur();">span>联系我们/span>/a>/li>
/ul>
/div>
div id="content" class="content1">
div id="content1">p>仿淘宝网站的导航效果。此方法有几个优点：/p>1、根据字数自适应项目长度/div>
div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分/div>
div id="content3" class="hidecontent">3、这回需要使用到js了，呵呵/div>
div id="content4" class="hidecontent">4、背景图片只需要两个图片文件就足够，减少服务器负担/div>
div id="content5" class="hidecontent">5、这是使用到的两个图片：
table width="58%" border="1" cellspacing="2" cellpadding="0">
tr>
td width="70%" align="center">img src="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" width="250" height="290" />/td>
td width="30%" align="center">img src="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" width="15" height="290" />/td>
/tr>
/table>
/div>
/div>
/div>
/body>
/html>
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
HTML>HEAD>TITLE>test/TITLE>
META http-equiv=Content-Type content="text/html; charset=gb2312">
STYLE type=text/css>BODY {
FONT-SIZE: 14px; COLOR: #000; FONT-FAMILY: 宋体
}
TD {
FONT-SIZE: 14px; COLOR: #000; FONT-FAMILY: 宋体
}
SELECT {
FONT-SIZE: 12px
}
INPUT {
FONT-SIZE: 12px
}
A:link {
COLOR: #3d362b
}
A:visited {
COLOR: #3d362b
}
A:hover {
COLOR: #f60
}
BODY #search {
CLEAR: both; WIDTH: 540px; HEIGHT: 50px
}
BODY #search #left {
FLOAT: left
}
BODY #search #searchleft {
PADDING-LEFT: 30px; FLOAT: left; PADDING-TOP: 12px; HEIGHT: 35px; TEXT-ALIGN: left
}
BODY #search #searchleft1 {
PADDING-LEFT: 30px; PADDING-TOP: 12px; HEIGHT: 35px; TEXT-ALIGN: left
}
FORM {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY #newsearch {
WIDTH: 540px; HEIGHT: 30px
}
BODY #newsearchtop {
WIDTH: 540px; HEIGHT: 25px; TEXT-ALIGN: right
}
BODY #newsearchtop LI {
FONT-SIZE: 12px; FLOAT: left
}
.newsearchinsidew { BORDER-TOP: #cccccc 1px solid; MARGIN-TOP: 2px; BORDER-LEFT: #ccc 1px solid; WIDTH: 70px; CURSOR: hand; LINE-HEIGHT: 21px; BORDER-BOTTOM: #cc3300 1px solid; HEIGHT: 23px; TEXT-ALIGN: center; TEXT-DECORATION: underline}
.newsearchinsider { BORDER-RIGHT: #cc3300 1px solid; BORDER-TOP: #cc3300 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #cc3300 1px solid; WIDTH: 70px; COLOR: #ffffff; PADDING-TOP: 5px; HEIGHT: 25px; BACKGROUND-COLOR: #ff7300; TEXT-ALIGN: center}
.newsearchinsider A:visited {
COLOR: #ffffff; TEXT-DECORATION: none
}
.newsearchinsidew A:hover {
background-color:#CCCCCC;WIDTH: 69px; TEXT-ALIGN: center
}
BODY #newsearchbottom {
BORDER-RIGHT: #cc3300 1px solid; BORDER-LEFT: #cc3300 1px solid; BORDER-BOTTOM: #cc3300 1px solid; POSITION: relative; HEIGHT: 50px; BACKGROUND-COLOR: #ff7300
}
BODY #newsearchbottom #e1 { Z-INDEX: 0; LEFT: 0px; VISIBILITY: visible; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e2 { Z-INDEX: 0; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e3 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e4 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e5 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e6 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e7 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
UL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}
/STYLE>
SCRIPT>
function doClick(o){
o.className="newsearchinsider";
var j;
var id;
var e;
for(var i=1;i=7;i++){
id ="v"+i;
j = document.getElementById(id);
e = document.getElementById("e"+i);
if(id != o.id){
j.className="newsearchinsidew";
e.style.visibility = "hidden";
}else{
e.style.visibility = "visible";
}
}
var id = o.id+"";
var dd=id.substring(1,2);
var curForm = document.getElementById("FormSearch"+dd);
var inputv ;
for(var i=1;i=7;i++){
var otherForm = document.getElementById("FormSearch"+i);
}
}
function doOut(o){
}
/SCRIPT>
/HEAD>
BODY>
br>br>
DIV id=search>
DIV id=newsearch>
DIV id=newsearchtop>
UL>
LI>DIV class=newsearchinsider id=v1 onClick="javascript:doClick(this)">A href="#">供应信息/A>/DIV>/LI>
LI>DIV class=newsearchinsidew id=v2 onClick="javascript:doClick(this)">A href="#">求购信息/A>/DIV>/LI>
LI>DIV class=newsearchinsidew id=v3 onMouseOver="javascript:doClick(this)">A href="#">产品目录/A>/DIV>/LI>
LI>DIV class=newsearchinsidew id=v4 onMouseOver="javascript:doClick(this)">A href="#">公司库/A>/DIV>/LI>
LI>DIV class=newsearchinsidew id=v5 onMouseOver="javascript:doClick(this)">A href="#">商业资讯/A>/DIV>/LI>
LI>DIV class=newsearchinsidew id=v6 onMouseOver="javascript:doClick(this)">A href="#">商人论坛/A>/DIV>/LI>
LI>DIV class=newsearchinsidew id=v7 onMouseOver="javascript:doClick(this)">A href="#">拍卖信息/A>/DIV>/LI>
/UL>
/DIV>
DIV id=newsearchbottom>
DIV id=e1>DIV id=left>DIV id=searchleft1>搜索 供应信息/DIV>/DIV>/DIV>
DIV id=e2>DIV id=left>DIV id=searchleft1>请输入产品名关键字/DIV>/DIV>/DIV>
DIV id=e3>DIV id=left>DIV id=searchleft1>请输入产品名关键字/DIV>/DIV>/DIV>
DIV id=e4>DIV id=left>DIV id=searchleft1>请输入产品名或公司名关键字/DIV>/DIV>/DIV>
DIV id=e5>DIV id=left>DIV id=searchleft1>请输入关键字/DIV>/DIV>/DIV>
DIV id=e6>DIV id=left>DIV id=searchleft1>请输入关键字/DIV>/DIV>/DIV>
DIV id=e7>DIV id=left>DIV id=searchleft1>请输入拍卖关键字/DIV>/DIV>/DIV>/DIV>/DIV>
/DIV>DIV>/DIV>
/BODY>/HTML>
不过，这种叫法有点夸大的嫌疑。因为本来就是很简单的一个小技巧而已，算不上什么特别的技术。
说白了，滑动门技术就是：叠加2个背景。
再详细点就是，给设置一个左背景，然后在a里面增加一个右浮动的，给它设置一个右背景。这样就可以用a的伪类hover来实现鼠标放上去，菜单背景的替换效果了。
!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=gb2312" />
title>无标题文档/title>
style type="text/css">
/style>
script language="javascript">
function switchTag(tag,content)
{
// alert(tag);
// alert(content);
for(i=1; i 6; i++)
{
if ("tag"+i==tag)
{
document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i;
}else{
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
}
if ("content"+i==content)
{
document.getElementById(content).className="";
}else{
document.getElementById("content"+i).className="hidecontent";
}
document.getElementById("content").className=content;
}
}
/script>
/head>
body>
div id="container">
div id="title">
ul>
li id="tag1">a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1">span class="selectspan1">首页/span>/a>/li>
li id="tag2">a href="#" onclick="switchTag('tag2','content2');this.blur();">span>下载中心/span>/a>/li>
li id="tag3">a href="#" onclick="switchTag('tag3','content3');this.blur();">span>产品介绍/span>/a>/li>
li id="tag4">a href="#" onclick="switchTag('tag4','content4');this.blur();">span>会员注册与登录/span>/a>/li>
li id="tag5">a href="#" onclick="switchTag('tag5','content5');this.blur();">span>联系我们/span>/a>/li>
/ul>
/div>
div id="content" class="content1">
div id="content1">p>仿淘宝网站的导航效果。此方法有几个优点：/p>1、根据字数自适应项目长度/div>
div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分/div>
div id="content3" class="hidecontent">3、这回需要使用到js了，呵呵/div>
div id="content4" class="hidecontent">4、背景图片只需要两个图片文件就足够，减少服务器负担/div>
div id="content5" class="hidecontent">5、这是使用到的两个图片：
table width="58%" border="1" cellspacing="2" cellpadding="0">
tr>
td width="70%" align="center">img src="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" width="250" height="290" />/td>
td width="30%" align="center">img src="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" width="15" height="290" />/td>
/tr>
/table>
/div>
/div>
/div>
/body>
/html>
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
HTML>HEAD>TITLE>test/TITLE>
META http-equiv=Content-Type content="text/html; charset=gb2312">
STYLE type=text/css>BODY {
FONT-SIZE: 14px; COLOR: #000; FONT-FAMILY: 宋体
}
TD {
FONT-SIZE: 14px; COLOR: #000; FONT-FAMILY: 宋体
}
SELECT {
FONT-SIZE: 12px
}
INPUT {
FONT-SIZE: 12px
}
A:link {
COLOR: #3d362b
}
A:visited {
COLOR: #3d362b
}
A:hover {
COLOR: #f60
}
BODY #search {
CLEAR: both; WIDTH: 540px; HEIGHT: 50px
}
BODY #search #left {
FLOAT: left
}
BODY #search #searchleft {
PADDING-LEFT: 30px; FLOAT: left; PADDING-TOP: 12px; HEIGHT: 35px; TEXT-ALIGN: left
}
BODY #search #searchleft1 {
PADDING-LEFT: 30px; PADDING-TOP: 12px; HEIGHT: 35px; TEXT-ALIGN: left
}
FORM {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY #newsearch {
WIDTH: 540px; HEIGHT: 30px
}
BODY #newsearchtop {
WIDTH: 540px; HEIGHT: 25px; TEXT-ALIGN: right
}
BODY #newsearchtop LI {
FONT-SIZE: 12px; FLOAT: left
}
.newsearchinsidew { BORDER-TOP: #cccccc 1px solid; MARGIN-TOP: 2px; BORDER-LEFT: #ccc 1px solid; WIDTH: 70px; CURSOR: hand; LINE-HEIGHT: 21px; BORDER-BOTTOM: #cc3300 1px solid; HEIGHT: 23px; TEXT-ALIGN: center; TEXT-DECORATION: underline}
.newsearchinsider { BORDER-RIGHT: #cc3300 1px solid; BORDER-TOP: #cc3300 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #cc3300 1px solid; WIDTH: 70px; COLOR: #ffffff; PADDING-TOP: 5px; HEIGHT: 25px; BACKGROUND-COLOR: #ff7300; TEXT-ALIGN: center}
.newsearchinsider A:visited {
COLOR: #ffffff; TEXT-DECORATION: none
}
.newsearchinsidew A:hover {
background-color:#CCCCCC;WIDTH: 69px; TEXT-ALIGN: center
}
BODY #newsearchbottom {
BORDER-RIGHT: #cc3300 1px solid; BORDER-LEFT: #cc3300 1px solid; BORDER-BOTTOM: #cc3300 1px solid; POSITION: relative; HEIGHT: 50px; BACKGROUND-COLOR: #ff7300
}
BODY #newsearchbottom #e1 { Z-INDEX: 0; LEFT: 0px; VISIBILITY: visible; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e2 { Z-INDEX: 0; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e3 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e4 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e5 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e6 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e7 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
UL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}
/STYLE>
SCRIPT>
function doClick(o){
o.className="newsearchinsider";
var j;
var id;
var e;
for(var i=1;i=7;i++){
id ="v"+i;
j = document.getElementById(id);
e = document.getElementById("e"+i);
if(id != o.id){
j.className="newsearchinsidew";
e.style.visibility = "hidden";
}else{
e.style.visibility = "visible";
}
}
var id = o.id+"";
var dd=id.substring(1,2);
var curForm = document.getElementById("FormSearch"+dd);
var inputv ;
for(var i=1;i=7;i++){
var otherForm = document.getElementById("FormSearch"+i);
}
}
function doOut(o){
}
/SCRIPT>
/HEAD>
BODY>
br>br>
DIV id=search>
DIV id=newsearch>
DIV id=newsearchtop>
UL>
LI>DIV class=newsearchinsider id=v1 onClick="javascript:doClick(this)">A href="#">供应信息/A>/DIV>/LI>
LI>DIV class=newsearchinsidew id=v2 onClick="javascript:doClick(this)">A href="#">求购信息/A>/DIV>/LI>
LI>DIV class=newsearchinsidew id=v3 onMouseOver="javascript:doClick(this)">A href="#">产品目录/A>/DIV>/LI>
LI>DIV class=newsearchinsidew id=v4 onMouseOver="javascript:doClick(this)">A href="#">公司库/A>/DIV>/LI>
LI>DIV class=newsearchinsidew id=v5 onMouseOver="javascript:doClick(this)">A href="#">商业资讯/A>/DIV>/LI>
LI>DIV class=newsearchinsidew id=v6 onMouseOver="javascript:doClick(this)">A href="#">商人论坛/A>/DIV>/LI>
LI>DIV class=newsearchinsidew id=v7 onMouseOver="javascript:doClick(this)">A href="#">拍卖信息/A>/DIV>/LI>
/UL>
/DIV>
DIV id=newsearchbottom>
DIV id=e1>DIV id=left>DIV id=searchleft1>搜索 供应信息/DIV>/DIV>/DIV>
DIV id=e2>DIV id=left>DIV id=searchleft1>请输入产品名关键字/DIV>/DIV>/DIV>
DIV id=e3>DIV id=left>DIV id=searchleft1>请输入产品名关键字/DIV>/DIV>/DIV>
DIV id=e4>DIV id=left>DIV id=searchleft1>请输入产品名或公司名关键字/DIV>/DIV>/DIV>
DIV id=e5>DIV id=left>DIV id=searchleft1>请输入关键字/DIV>/DIV>/DIV>
DIV id=e6>DIV id=left>DIV id=searchleft1>请输入关键字/DIV>/DIV>/DIV>
DIV id=e7>DIV id=left>DIV id=searchleft1>请输入拍卖关键字/DIV>/DIV>/DIV>/DIV>/DIV>
/DIV>DIV>/DIV>
/BODY>/HTML>
相关阅读 更多 +
