JavaScript鼠标进入与退出监听动画
Posted yanglang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript鼠标进入与退出监听动画相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分享</title>
<style type="text/css">
.div{
width: 150px;
height: 150px;
background-color: red;
position: absolute;
left: -150px;
top: 150px;
}
.share{
background-color: blue;
position:relative;
left: 150px;
top: 75px;
}
</style>
</head>
<script type="text/javascript">
var div
function init(){
div = document.getElementsByTagName("div")[0];
//var span = document.getElementsByTagName("span")[0];
div.onmouseover = function(){
//当鼠标进入的时候 触发事件
startMove(true);
}
div.onmouseout = function(){
//当鼠标移除的时候触发事件
startMove(false);
}
}
var timer;
function startMove(isEnter){
clearInterval(timer);
timer = setInterval(function(){
if(isEnter){
//当鼠标进入的时候
div.style.left = div.offsetLeft +1 +"px";
if(div.offsetLeft >= 0){
clearInterval(timer);
}
//document.write("enter:"+div.style.left)
}else{
//当鼠标退出时
div.style.left = div.offsetLeft - 1 +"px";
if(div.offsetLeft <= -150){
clearInterval(timer);
}
}
},10);
}
</script>
<body onload="init()">
<div class="div">
<span class="share">分享</span>
</div>
</body>
</html>
以上是关于JavaScript鼠标进入与退出监听动画的主要内容，如果未能解决你的问题，请参考以下文章