实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0px;padding:0px;}
#parent{width:300px;height:100px;background:pink;position:absolute;top:100px;left:-280px;}
#son{width:100px;height:100px;background:lightblue;}
</style>
</head>
<body>
<div id="parent">
<div id="son"></div>
</div>
</body>
<script>
var parent = document.getElementById('parent');
var num = -280;
var timmer;
var timmer1;
//进入div
parent.onmouseenter =function(){
//清除移除的定时器
clearInterval(timmer1);
//console.log('鼠标移入')
//移动div让其出来的效果显示
timmer = setInterval(function(){
parent.style.left= num+'px';
num++;
//判断如果num超出内容我们则清空定时器
if (num >= 0) {
//清除定时器
clearInterval(timmer);
}
},10)
}
//移除div
parent.onmouseleave =function(){
//清除移入的定时器
clearInterval(timmer);
//console.log('鼠标移除')
timmer1 = setInterval(function(){
parent.style.left = num + 'px';
num--;
//判断如果小于-280 我们就清空定时器
if(num <= -280){
clearInterval(timmer1);
}
},10)
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
