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

最新推荐文章于 2023-06-15 17:03:12 发布

ahuotai8429

最新推荐文章于 2023-06-15 17:03:12 发布

阅读量107

点赞数

文章标签： javascript ViewUI

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

版权

<!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>

转载于:https://www.cnblogs.com/android-er/p/5592418.html

ahuotai8429

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript鼠标进入与退出监听动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>分享</title> <style type="text/css"> .div{ width: 150px; height: 150px; backgrou...
复制链接

扫一扫