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

这个问题需要强人解决,麻烦帮帮

<style type="text/css">

* { margin: 0; padding: 0; font-size: 14px; }

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

ul { list-style: none; height: 30px; border-bottom: 5px solid #F60; margin-top: 20px; padding-left: 50px; }

ul li { float: left }

ul li a { display: block; height: 30px; text-align: center; line-height: 30px; 

width:120px; background: #efefef; margin-left: 1px; }

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

</style>

<script type="text/javascript">

window.onload = function(){

var aA = document.getElementsByTagName("a")

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

aA[i].onmouseover = function(){

var This = this;

clearInterval(timer);

var timer = setInterval(function(){

This.style.width = This.offsetWidth + 8 + "px";

if(This.offsetWidth >=160){

clearInterval(timer);}

},30)

}

aA[i].onmouseout = function(){

var This = this;

clearInterval(timer);

var timer = setInterval(function(){

This.style.width = This.offsetWidth - 8 +"px";

if(This.offsetWidth <= 120){

This.style.width = "120px";

clearInterval(timer);

}

},30)

}

}

}

</script>

</head>

<body>

<ul>

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

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

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

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

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

</ul>

</body>

以上代码我在设置定时器那里设置变量和老师的答案不同,以至于有时候会出现框框不停的跳动,如果我把上面的加粗字体var timer改为老师写的This.time就好了。为什么会出现这种状况?之前写别的清除计时器也是要给它一个变量呀,为什么这里不用了呢?

http://img1.sycdn.imooc.com//578b12420001596307360548.jpg

正在回答

1 回答

我觉得应该是老师的This.timer写法对,为什么呢,因为你触发的是对象是鼠标放上去的那个对象,this代表这个对象,这样写就相当于把定时器对象设置为This的一个属性或者说对象 就比如var i=30 其实是window.i=30一样的道理。这个你需要深入理解this的含义了,不过说实话每个语言里面都是有这个This的。不停滴跳动可能是别的li上面受到了影响吧。

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

慕粉1463572084 提问者

谢谢回答
2016-07-17 回复 有任何疑惑可以回复我~

举报

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

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

进入课程

这个问题需要强人解决,麻烦帮帮

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