您的位置：首页 > 其它

在两个元素间实现"无缝"移动

2014-08-29 02:00 267 查看

即：从鼠标移到元素A，元素B显现。鼠标移出元素A，元素B消失。在元素A与元素B之间移动，元素B一直保持可见状态。

原理与步骤：

1：设置元素B的display属性为none；

2：用JS获得元素A和B，为元素AB分别添加鼠标移入移出事件。当鼠标移入元素A时，元素B的display属性改为BLOCK。当鼠标移出元素A时，开启一个setTImeout延时定时器，使元素B推迟消失。当鼠标移动到元素B元素时，清除定时器，并为元素B设置为BLOCK属性值。当鼠标移出元素B时，同时开启延迟定时器。如果再移到A的话，先清除定时器。

代码：

<html>
<head>
<meta charset="utf-8"/>
<title>移出移入</title>
<style>
#div1{width:300px; height:300px; background:red; position:absolute; top:0; left:0;}
#div2{width:200px; height:200px; background:red; position:absolute; top:0; left:320px; display:none;}
</style>
<script>
var timer;
window.onload=function(){
oDiv1=document.getElementById("div1");
oDiv2=document.getElementById("div2");
oDiv1.onmouseover=oDiv2.onmouseover=function(){
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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航