请问我的为什么实现不了？
Alphonse丿
2016-06-23 15:54
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js透明度变化</title>
<style>
div{width:200px;height:200px;background:#0f0;opacity:0.2;}
</style>
</head>
<body>
<script>
var newdiv=document.createElement("div");
document.body.appendChild(newdiv);
var timer=null;
newdiv.onmouseover=function(){
fadeToogle(1);
}
newdiv.onmouseout=function(){
fadeToogle(0.2);
}
function fadeToogle(iTarget){
if(timer){
clearInterval(timer);
}
timer=setInterval(function(){
var speed;
if(newdiv.style.opacity>iTarget){
speed=-0.05;
}
if(newdiv.style.opacity<iTarget){
speed=0.05;
}
if(newdiv.style.opacity==iTarget){
clearInterval(timer);
}else{
newdiv.style.opacity+=speed;
}
},30)
}
</script>
</body>
</html>
3回答
-
- 小幸运17
- 2016-07-22 12:17:58
原谅我根本没看到你的div在哪里？？
我不敢相信你前面的都学会了？？
-
- 不看美女_就闹心
- 2016-06-23 18:53:31
这个用jQuery的toggleClass就简单了，可以看一下
-
- 幽雪孤狐
- 2016-06-23 17:53:09
简单看了下，代码的逻辑是通过JS创建个DIV,插入到body中，然后希望鼠标移入时透明度变为1，移出时再把透明度变回来，但此代码有几个致命错误，反映出楼主要对基本概念的理解要加强。
1、通过创建插入的方法没有错，但是，这个时候创建的这个div有没有opacity属性呢？由newdiv.style.opacity可看出，楼主希望通过这个方法来获取div的opacity属性。但是，这个对象本身并没有这个属性啊，原因是楼主并没有通过newdiv.setAttribute来设置这个opacity属性。楼主可能认为在样式表中写了opacity：0.2，没错，但那并不是newdiv这个对象的属性，别忘了，js中一切都是对象，没有的属性怎么得到？由对象的概念来解释newdiv.style.opacity就是newdiv对象的style属性下的opacity属性，此时的newdiv没有这个属性。一句话总结：newdiv.style.opacity获取的是行间样式，并不能取到样式表中的值，原回很简单，也很基础，就是对对象的理解要到位。
2、if(timer){clearInterval(timer)}，楼主希望通过些判断来清除计时器来达到清除定时器的效果。但事实上是清除不掉的。重申一遍，js里一切都是对象，函数也不例外，对于对象的引用仅仅是指针的引用。那么移入时的过程就是：指向匿名函数，调用fadeToggle函数时指针指向它，以后的过程都一样。进入fadeToggle函数时判断timer变里的布尔类型，首次是null，然后给他赋值了一个计时器，关键的是，计时器是什么？没错，是对象，那么全局变量对他的引用就是一个地址的引用，再次进入时企图判断timer的布尔类型清掉计时器，那么这时候清掉的是什么？仅仅是一个指针，而原来作用域链上的计时器并没有被清掉，所以在控制台里查看时，timer的个数（也就是计时器的个数）总是随鼠标移入移出的次数而增加。
3、理解了上面基本上也就能找到解决方案了，还有一个地方也要注意下，就是函数作用域链的问题。鼠标移入时触发了一个匿名函数，匿名函数又调用fadeToggle函数，fadeToggle函数中又有一个定时器，定时器里还有一个匿名函数，这一系列的函数串在一起就是形成了一个作用域链，这个作用域链并没有因为鼠标的移出而销毁掉，因为计时器里的匿名函数始终在被引用，所以不可能销毁，除非我们将这个计时器给清掉，注意一定是清掉此条作用域链下的计时器。
声明，本人也是一个初学者，有不当之处还请指点！开始也是看视频练这些东西，但后来发现基础的原理不掌握实在是举步难行，所以放弃学这些，拿着书看原理，看完原理的东西再看这些一切都变得如此简单，说来说去就那么点东西，虽然这段代码并没有亲自实验
JS动画效果
113925 学习 · 1443 问题
相似问题