请大神看看为什么鼠标移出总是不停抖动

来源:2-1 JS速度动画

李李晨晨

2016-06-12 00:26

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{

margin:0;

padding:0;

}

#box{

position:relative;

left:-200px;

}

.one{

width:200px;

height:200px;

background-color:red;

float:left;

}

.two{

width:50px;

height:50px;

background-color:blue;

float:left;

margin-top:55px;

}

</style>

<script type="text/javascript">

window.onload=function(){

var odiv=document.getElementById("box");

odiv.onmouseover=function(){

starmove1(0)

}

odiv.onmouseout=function(){

   starmove1(-200)

}

}




function starmove1(iTarget){

var timer;

clearInterval(timer);

var odiv=document.getElementById("box");

timer=setInterval(function(){

var speed;

if(odiv.offsetLeft>iTarget){

speed=-10;

}else{

speed=10

}

if(odiv.offsetLeft==iTarget){

clearInterval(timer);

}else{

odiv.style.left=odiv.offsetLeft+speed+"px";}

},30);

}


</script>

</head>


<body>

<div id="box">

<div class="one"></div>

<div class="two">分享</div>

</div>

</body>

</html>


写回答 关注

5回答

  • 追梦的少女
    2016-07-29 20:49:15

    我也是这个问题不知道怎么回事,onmouseout就一直出现抖动问题,请问你知道怎么回事了么,求指教


  • 盛夏孤星
    2016-06-28 16:17:09

    也许是你没有给timer和speed初始值吧

  • lesses
    2016-06-25 20:01:15

    我也是这个原因啊 不知道为什么会这样,照理来说直接在函数中定义应该没问题啊

  • panmc2
    2016-06-18 17:28:08

    猜测是html结构的原因

    panmc2

    把var timer=null;这句代码放在执行函数外面就不会出现抖动了。

    2016-06-19 14:40:51

    共 1 条回复 >

  • Clever琴
    2016-06-12 01:32:53

    总感觉你设置的那个speed有问题、而且定时器的调用成立重复性。。。。我也不确定是不是这样的

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113923 学习 · 1443 问题

查看课程

相似问题