为了账号安全,请及时绑定邮箱和手机立即绑定

导航那里,如果鼠标快速跨越2个A标签,然后文字就会抖动了,你们的会么,应该是定时器问题,怎么解决?

<!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; font-size:14px;}

ul{ list-style:none;}

a{color:#333;text-decoration:none}

.nav{border-bottom: 5px solid #F60;padding-left: 50px;height: 30px;margin-top: 50px;}

.nav li{ float: left;}

.nav li a{ display:block; text-align: center; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;}

.nav .on,.nav li a:hover{ background-color:#F60; color:#fff;}

</style>


<script>

window.onload=function(){

function getstyle(obj,attr){

return( obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]);//各种浏览器下获取变量的属性参数

}

var oul=document.getElementsByTagName('ul')[0];

var aA=oul.getElementsByTagName('a');

var timer=null;

var timer1=null;

for(var i=0;i<aA.length;i++){

aA[i].onmouseover=function(){

var _this=this;

//alert(getstyle(_this,'width'));

clearInterval(timer);

timer=setInterval(function(){

// _this.style.width=_this.style.width+8+'px';  //width 不可以直接加的 要用getstyle 那个函数获取值 再加px

//_this.style.width=_this.offsetWidth+8+'px';

_this.style.width= parseInt(getstyle(_this,'width'))+8+'px';

if(parseInt(getstyle(_this,'width'))>=160){clearInterval(timer);}

},30)

}

aA[i].onmouseout=function(){

var _this1=this;

clearInterval(timer1);

timer1=setInterval(function(){

// _this.style.width=_this.style.width+8+'px';  //width 不可以直接加的 要用getstyle 那个函数获取值 再加px

//_this.style.width=_this.offsetWidth+8+'px';

_this1.style.width= parseInt(getstyle(_this1,'width'))-8+'px';

if(parseInt(getstyle(_this1,'width'))<=100){clearInterval(timer1);_this1.style.width=100+'px';}

},30)

}

}

}

</script>

</head>

<body>


<ul class="nav">

    <li><a href="#" class="on">首  页</a></li>

    <li><a href="#">新闻快讯</a></li>

    <li><a href="#">产品展示</a></li>

    <li><a href="#">售后服务</a></li>

    <li><a href="#">联系我们</a></li>

  </ul>


</body>

</html>


正在回答

4 回答

《《《《《《《《《《《

0 回复 有任何疑惑可以回复我~

应该是30毫秒的事,把时间调短就没事了,时间越长,越明显,这应该是人眼识别的帧率有关,但是我查了一下人眼帧率,30毫秒又足够了,但是调低了之后又有作用,希望其他路过的大神能解释一下。

1 回复 有任何疑惑可以回复我~

注意老师的鼠标每次都是从下方移动到导航条上,在避免触及多个。

0 回复 有任何疑惑可以回复我~

我也出现过,不仅快速抖动,而且标签无限拉长。应该是没有清除计时器,照着例子加上clearInterval(this.time);这句清理计时器的语句,就不会出现这种问题了。你这个自己写的js语句里清除计时器的那句应该没有发挥作用。我知道的只有这些~~

0 回复 有任何疑惑可以回复我~
#1

qq_ggJKING_LWJ_0 提问者

我的clear应该没问题的。
2016-09-14 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
导航条菜单的制作
  • 参与学习       123901    人
  • 解答问题       813    个

水平、垂直、圆角导航条菜单,让您的技术探索之路更高效

进入课程

导航那里,如果鼠标快速跨越2个A标签,然后文字就会抖动了,你们的会么,应该是定时器问题,怎么解决?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信