信鸽网

实用的层滑开js实现代码

  作者：bea

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


<!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>
<script>
var flag=0;
function f_s(id){
var obj=document.getElementById(id);
obj.style.display="block";
obj.style.height="1px";
var changeW=function(){
var obj_h=parseInt(obj.style.height);
if(obj_h<=160){
obj.style.height=(obj_h+Math.ceil((160-obj_h)/10))+"px";
}
else{
clearInterval(bw1);
}
}
bw1= setInterval(changeW,1);
if(flag>0){
clearInterval(bw2);
}
}
function closeW(id){
flag++;
var obj=document.getElementById(id);
var closeDiv=function(){
clearInterval(bw1);
var obj_h=parseInt(obj.style.height);
if(obj_h>1){
obj.style.height=(obj_h-Math.ceil(obj_h)/10)+"px";

}
else{
clearInterval(bw2);
obj.style.display="none";
}
}
bw2= setInterval(closeDiv,1);
}
function showDiv(){
var ele = document.getElementById("div1");
clearInterval(bw1);
clearInterval(bw2);
ele.style.display = "block";
ele.style.height = 160 + "px";
}
</script>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.c {width:100%;height:30px;}
.c ul {margin:0px;padding:0px;}
.c ul li{width:100px;height:30px;float:left;background:#eeeeee;list-style-type:none}
-->
</style>
</head>
<body>
<div class="c">
<ul>
<li onmouseover="f_s('div1')" onmouseout="closeW('div1')">111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
<div id="div1" style="position:absolute;background:aqua;overflow:hidden;width:970px;display:none" onmouseover="showDiv()" onmouseout="closeW('div1')">000</div>
</body>
</html>




[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]



有用  |  无用

猜你喜欢

您可能感兴趣的文章: