87,993
社区成员
发帖
与我相关
我的任务
分享求大神帮忙修改下这个js效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<style>
*{margin:0;padding:0;}
#aa{width:200px;height:200px;background:red;position:relative;left:-200px;top:0;}
#aa span{width:20px;height:50px;background:blue;position:absolute;left:200px;top:75px;}
</style>
</head>
<body>
<div id="aa"><span>分享</span></div>
<script>
var aa =document.getElementById("aa");
var time = null;
aa.onmouseover=function(){
time=setInterval(function(){
if(aa.offsetLeft>=0){
clearInterval(time);
}else{
aa.style.left=aa.offsetLeft+10+"px";
}
},20);
}
aa.onmouseout=function(){
clearInterval(time);
aa.style.left=-200+"px";
};
</script>
</body>
</html>
上面那段js 虽然可以成功做到鼠标移入 移出事件效果， 但是总感觉有些问题， 会有抖动 还有一些消失过快之类的问题，反正多移入移出几次就感觉不对，求大神帮忙看看
...全文
请发表友善的回复…
发表回复
天际的海浪 2017-08-25
- 打赏
- 举报
现在的浏览器版本都支持，看看浏览器支持的版本号
http://www.runoob.com/jsref/event-onmouseenter.html
qingwadaxia_1 2017-08-25
- 打赏
- 举报
大神 你这个代码就没有那种感觉 很正常舒服 这是什么原因呢[/quote]
onmouseover、nmouseout：鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件
onmouseenter、onmouseleave：鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件[/quote]onmouseenter、onmouseleave 这两个没有兼容性问题吧 大神 我看过你不少博客
天际的海浪 2017-08-25
- 打赏
- 举报
大神 你这个代码就没有那种感觉 很正常舒服 这是什么原因呢[/quote]
onmouseover、nmouseout：鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件
onmouseenter、onmouseleave：鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件
qingwadaxia_1 2017-08-25
- 打赏
- 举报
大神 你这个代码就没有那种感觉 很正常舒服 这是什么原因呢
qq_22811787 2017-08-25
- 打赏
- 举报
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<style>
*{margin:0;padding:0;}
#aa{width:200px;height:200px;background:red;position:relative;left:-200px;top:0;}
#aa span{width:20px;height:50px;background:blue;position:absolute;left:200px;top:75px;}
</style>
</head>
<body>
<div id="aa"><span>分享</span></div>
<script>
var aa =document.getElementById("aa");
var time = null;
aa.onmouseenter=function(){
clearInterval(time);
time=setInterval(function(){
if(aa.offsetLeft>=0){
clearInterval(time);
}else{
aa.style.left=aa.offsetLeft+10+"px";
}
},20);
}
aa.onmouseleave=function(){
clearInterval(time);
aa.style.left=-200+"px";
};
</script>
</body>
</html>
lemon520 2017-08-25
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<style>
.open{
animation: expand 0.8s forwards;
}
@keyframes expand {
0% {left:-200px;}
100% {left:0px;}
}
*{margin:0;padding:0;}
#aa{width:200px;height:200px;background:red;position:relative;left:-200px;top:0;}
#aa span{width:20px;height:50px;background:blue;position:absolute;left:200px;top:75px;}
</style>
</head>
<body>
<div id="aa" onmouseover="this.className='open';" onmouseout="this.removeAttribute('class');"><span>share</span></div>
</body>
</html>天际的海浪 2017-08-25
- 打赏
- 举报
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<style>
*{margin:0;padding:0;}
#aa{width:200px;height:200px;background:red;position:relative;left:-200px;top:0;}
#aa span{width:20px;height:50px;background:blue;position:absolute;left:200px;top:75px;}
</style>
</head>
<body>
<div id="aa"><span>分享</span></div>
<script>
var aa =document.getElementById("aa");
var time = null;
aa.onmouseenter=function(){
clearInterval(time);
time=setInterval(function(){
if(aa.offsetLeft>=0){
clearInterval(time);
}else{
aa.style.left=aa.offsetLeft+10+"px";
}
},20);
}
aa.onmouseleave=function(){
clearInterval(time);
aa.style.left=-200+"px";
};
</script>
</body>
</html>
