首页 > 编程语言 > 详细

JavaScript鼠标进入与退出监听动画

时间:2016-06-17 00:26:52      阅读:230      评论:0      收藏:0      [点我收藏+]

<!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鼠标进入与退出监听动画

原文:http://www.cnblogs.com/android-er/p/5592418.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!