js源码--动态层

转载 于 2007-09-18 16:36:00 发布 · 1k 阅读 · 1
文章标签：

#function #button #div #fun #javascript #html

本文介绍了一个使用JavaScript实现的鼠标悬停动画效果，通过调整元素的宽度、高度及位置来实现平滑的显示和隐藏动画。文章详细展示了如何设置HTML结构、CSS样式以及JavaScript逻辑，包括元素定位、事件监听及动画控制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<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等事件变量值随着改变 
CodingSir
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值