js实现抽屉效果
<?xml version="1.0" encoding="gb2312"?>
<!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>Test page</title>
<meta name="Author" content="mozart0" />
<style type="text/css">
/*<![CDATA[*/
ul{
width:200px
}
li{
border:1px solid gray;
list-style:none
}
.txt{
padding:4px;
background-color:#ffffff
}
.title{
font:bold 14px/20px verdana;
position:absolute;
top:0px;
}
/*]]>*/
</style>
<script language="javascript" type="text/javascript">
//<![CDATA
//有几列就定义几个变量
var v_m1="div1";
var v_m2="wvv1"
var v_m3="zyq1"
function DownDiv(arg)
{
var y =1;
var intv="";
function show1(){
document.getElementById(arg).style.top=document.getElementById(arg).offsetTop+1+"px";
y++;
if(y==100)
{
clearInterval(intv);
}
}
intv=setInterval(show1,1);
}
function UpDiv(arg)
{
var y =1;
var intv="";
function show1(){
document.getElementById(arg).style.top=document.getElementById(arg).offsetTop-1+"px";
y++;
if(y==100)
{
clearInterval(intv);
}
}
intv=setInterval(show1,1);
}
function V_div(arg)
{
var wh=arg.substring(0,3);
if(v_m1==arg)
{
return;
}
else
{
var t1=arg.substring(3);
var t2="";
switch(wh)
{
case "div":
t2=v_m1.substring(3);
break;
case "wvv":
t2=v_m2.substring(3);
break;
case "zyq":
t2=v_m3.substring(3);
break;
}
if(t1>t2)
{
if((t1-t2)==1)
{
UpDiv(arg.substring(0,3)+parseInt(t1-1));
}
else
{
for(var i=1;i<(t1-t2+1);i++)
{
UpDiv(arg.substring(0,3)+(t1-i));
}
}
}
if(t1<t2)
{
if((t2-t1)==1)
{
DownDiv(arg.substring(0,3)+parseInt(t2-1));
}
else
{
for(var i=1;i<(t2-t1+1);i++)
{
DownDiv(arg.substring(0,3)+(t2-i));
}
}
}
}
switch(wh)
{
case "div":
v_m1=arg;
break;
case "wvv":
v_m2=arg;
break;
case "zyq":
v_m3=arg;
break;
}
}
//]]>
</script>
</head>
<body>
<div style="position:relative;top:100px;">
<div class="txt" id="div1" style="position:absolute;top:50px; z-index:5" onclick="V_div('div1')">
<div class="title">Title A</div>
<img alt="" src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" /> </div>
<div class="txt" id="div2" style="position:absolute; top:110px; z-index:4" onclick="V_div('div2')">
<div class="title">Title A</div>
<img alt="" src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" /> </div>
<div class="txt" id="div3" style="position:absolute;top:170px; z-index:3" onclick="V_div('div3')">
<div class="title">Title B</div>
<img alt="" src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" />
</div>
<div class="txt" id="div4" style="position:absolute;top:230px; z-index:2" onclick="V_div('div4')">
<div class="title">Title A</div>
<img alt="" src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" /> </div>
<div class="txt" id="div5" style="position:absolute; top:290px; z-index:1" onclick="V_div('div5')">
<div class="title">Title A</div>
<img alt="" src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" /> </div>
<div class="txt" id="div6" style="position:absolute;top:350px; z-index:0" onclick="V_div('div6')">
<div class="title">Title B</div>
<img alt="" src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" />
</div>
<div class="txt" id="wvv1" style="position:absolute;top:50px; left:280px; z-index:5" onclick="V_div('wvv1')">
<div class="title">Title A</div>
<img alt="" src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" /> </div>
<div class="txt" id="wvv2" style="position:absolute; top:110px; left:280px; z-index:4" onclick="V_div('wvv2')">
<div class="title">Title A</div>
<img alt="" src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" /> </div>
<div class="txt" id="wvv3" style="position:absolute;top:170px; left:280px; z-index:3" onclick="V_div('wvv3')">
<div class="title">Title B</div>
<img alt="" src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" />
</div>
<div class="txt" id="wvv4" style="position:absolute;top:230px; left:280px; z-index:2" onclick="V_div('wvv4')">
<div class="title">Title A</div>
<img alt="" src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" /> </div>
<div class="txt" id="wvv5" style="position:absolute; top:290px; left:280px; z-index:1" onclick="V_div('wvv5')">
<div class="title">Title A</div>
<img alt="" src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" /> </div>
<div class="txt" id="wvv6" style="position:absolute;top:350px; left:280px; z-index:0" onclick="V_div('wvv6')">
<div class="title">Title B</div>
<img alt="" src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" />
</div>
<div class="txt" id="zyq1" style="position:absolute;top:50px; left:550px; z-index:5" onclick="V_div('zyq1')">
<div class="title">Title A</div>
<img alt="" src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" /> </div>
<div class="txt" id="zyq2" style="position:absolute; top:110px; left:550px; z-index:4" onclick="V_div('zyq2')">
<div class="title">Title A</div>
<img alt="" src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" /> </div>
<div class="txt" id="zyq3" style="position:absolute;top:170px; left:550px; z-index:3" onclick="V_div('zyq3')">
<div class="title">Title B</div>
<img alt="" src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" />
</div>
<div class="txt" id="zyq4" style="position:absolute;top:230px; left:550px; z-index:2" onclick="V_div('zyq4')">
<div class="title">Title A</div>
<img alt="" src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" /> </div>
<div class="txt" id="zyq5" style="position:absolute; top:290px; left:550px; z-index:1" onclick="V_div('zyq5')">
<div class="title">Title A</div>
<img alt="" src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" /> </div>
<div class="txt" id="zyq6" style="position:absolute;top:350px; left:550px; z-index:0" onclick="V_div('zyq6')">
<div class="title">Title B</div>
<img alt="" src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" />
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号