js源码--动态层

<style type="text/css">
body 
...{
height:
100%;
}

.wc, #wc1, #wc2 
...{
position:absolute;
border
-width:0px;
z
-index:2;
left:0px;
top:0px;
display:none
}

#wc1 
...{
width:320px;
height:240px;
background
-color:#FFCC00;
}

#wc2 
...{
width:420px;
height:340px;
background
-color:#CCCCCC;
}

.wc 
...{
z
-index:1;
}

</style>
<html>
<head>
</head>
<body>
<div id="wc1"></div>
<div id="wc2"></div>
<center>
<button id="show_wc1">show_wc1</button>
<button id="show_wc2">show_wc2</button>
<div id="id3"></div>
  
<form name="form1" method="post" action="">
    
<input type="submit" name="Submit" value="提交">
  
</form>
  
<br />
</center>
</body>
</html>
<script language="javascript">
window.onload
=init;
function init()...{
div1
=document.getElementById("wc1")
div2
=document.getElementById("wc2")
button1
=document.getElementById("show_wc1")
button2
=document.getElementById("show_wc2")
add(div1,button1)
add(div2,button2)
}


function add(o,p)...{
o.style.display
="block";
o.top
=p.offsetTop+p.offsetHeight;
o.left
=p.offsetLeft+Math.ceil(p.offsetWidth/2);
o.style.left
=parseInt(o.left)-Math.ceil(o.offsetWidth/2)
o.style.top
=o.top
o.width 
= (o.offsetWidth) / 20;
o.height 
= (o.offsetHeight) / 20;
o.num 
= 0;
o.style.width
=0;
o.style.height
=0
o.style.display
="none";
p.onmouseover
=o.onmouseover=function()...{move(o)};
p.onmouseout
=o.onmouseout=function()...{out(o)};
}


function move(o)...{
window.clearTimeout(o.time)
window.status
=o.num
    
if (++o.num<=20)...{
        o.style.display
="block";
        o.style.width
=(o.num * o.width) + "px"
        o.style.height
=(o.num * o.height) + "px"
        o.style.left
=parseInt(o.left)-(o.offsetWidth/2)
        o.clear
=window.setTimeout(move, 10, o);
        }

    
else...{
        window.clearTimeout(o.clear);
        }
    
}


function out(o)...{
window.clearTimeout(o.clear)
window.status
=o.num
if(--o.num>=0)...{
        o.style.width
=(o.num * o.width) + "px"
        o.style.height
=(o.num * o.height) + "px"
        o.style.left
=parseInt(o.left)-(o.offsetWidth/2)
        o.time
=window.setTimeout(out, 10, o);
        }

else...{
        o.style.display
="none"
        window.clearTimeout(o.time);
        }
        
}



(
function () ...{
var timeout = window.setTimeout;
window.setTimeout 
= function (a, b) ...{
var fun;
if ("function" == typeof a) ...{
var arg = Array.prototype.slice.call(arguments, 2);
fun 
= function () ...{
a.apply(
null, arg);
}
;
}
 else ...{
fun 
= a;
}

return timeout(fun, b);
}
;
}
)();

</script>
clearTimeout一定要注意,可以测试类型来确定是否有值,在就是不能在onmouse等事件里放初始值,害的我研究了一下午,原来是放在mousemove等事件变量值随着改变 
阅读更多
想对作者说点什么? 我来说一句

js特效制作层切换,动态时钟

2008年10月15日 1.38MB 下载

JS实现层拖动的实例代码

2008年08月25日 3KB 下载

ajax动态分页的DEMO

2009年04月22日 4KB 下载

Amcharts js

2013年04月22日 184KB 下载

浮动JS

2007年11月27日 26KB 下载

js弹出div层且锁屏

2011年09月16日 1KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭