<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
#div1 {float:left; width:63px; height:63px; background:red; margin:5px;}
#div2 {float:left; width:279px; height:362px; background:#666; margin:5px; display:none;}
</style>
<script type="text/javascript">
/*
思路:
1、一开始大框是隐藏的display:none
2、移入小框时显示大框display:block，移出时使用定时器延时隐藏大框。
3、鼠标移到大框时，取消定时器，大框还是显示。
4、鼠标移出大框时，使用定时器延时隐藏大框。
5、当鼠标是移回小框时，取消定时器，大框还是显示。
6、合并相同的代码
*/
window.onload = function() {
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var timer = null;
oDiv1.onmouseover = oDiv2.onmouseover = function () { //连等 a=b=c=6
clearTimeout(timer);
oDiv2.style.display = "block";
};
oDiv1.onmouseout = oDiv2.onmouseout = function() {
timer = setTimeout(function () {
oDiv2.style.display = "none";
}, 500);
};
};
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
2555
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
