js动画（2）——透明度动画

来源：互联网发布：cydia找不到软件源编辑：程序博客网时间：2024/05/16 05:19

<html><head><title>透明度变化效果</title><style>body{margin: 0px;padding: 0px;}.redb{width:200px;height: 200px;background: red;filter:alpha(opacity=30);opacity: 0.3;}</style><script src="file:///F:/front end/jqueryjquery-1.11.3.min.js" type="text/javascript"></script></head><body><div class="redb" id="opbtn"></div><script>window.onload = function(){var opDiv = document.getElementById("opbtn");opDiv.onmouseover = function(){      startMove(100);}opDiv.onmouseout = function(){startMove(30);}}var timer = null;var alpha = 30;var speed = 0;function startMove(opTarget){clearInterval(timer);var opDiv = document.getElementById("opbtn");timer = setInterval(function(){if(alpha<opTarget){speed = 10;}else if(alpha>opTarget){speed = -10;}if(alpha==opTarget){clearInterval(timer);}else{alpha += speed;opDiv.style.opacity = alpha/100;opDiv.style.filter = 'alpha(opacity='+alpha+')';}},30);}</script></body></html>

小结:
1、filter和opacity区别：w3c标准透明度就是opacity,filter只有IE才能用,其他浏览器都支持opacity
2、改变透明度时候，不能通过类似offsetLeft的方法获取透明度值，因此需要单独创建变量
3、不要忘记将定时器赋值给timer

0 0