javascript动画效果之透明度(修改版)

在编写多块同时触发运动的时候，发现一个BUG，

timer = setInterval(show, 30);本来show是一个自定义函数，
当设为timer = setInterval(show(one,two), 30);时，发现show里面的参数one和two无法被导入，所以需要做以下代码改进和优化

原版的html和css代码在这里javascript动画效果之透明度

js代码如下

 1 <script>
 2         function $(id) {
 3             return typeof id === "string" ? document.getElementById(id) : id;
 4         }
 5 
 6         window.onload = function() {
 7 
 8             //自定义变量
 9             var div = $("div");
10             var timer = null;
11             var alpha = 30;
12 
13             //这里触发进入事件绑定一个无名函数
14             div.onmouseenter = function() {
15                 //里面为自定义函数，并传参数100为，达到100%的透明度
16                 showDiv(100);
17             }
18 
19             //同理触发离开事件
20             div.onmouseleave = function() {
21                 //同理传参数为30，达到30%的透明度
22                 showDiv(30);
23             }
24 
25             //自定义函数,obj为自定义参数
26             function showDiv(obj) {
27                 //当前只需要一个定时器，所以需要在每次开始前清除定时器
28                 clearInterval(timer);
29                 //定时器是通过传入的参数obj来自增自减
30                 timer = setInterval(function() {
31                     console.log(alpha);
32                     if (alpha < obj) {
33                         //第一次传参obj为100,alpha为30所以，alpha+10；
34                         alpha += 10;
35                     } else {
36                         //第二次传参obj为30，而alpha为100，所以alpha-10；
37                         alpha -= 10;
38                     }
39                     if (alpha == obj) {
40                         //当相等时，则透明度为30或者100时，所以清除定时器
41                         clearInterval(timer);
42                     } else {
43                         //老版本ie透明度增加或者减少
44                         div.style.filter = 'alpha(opacity: ' + alpha + ');'
45                         //其他浏览器
46                         div.style.opacity = alpha / 100;
47                     }
48                 }, 30);
49             }
50 
51 
52         }
53     </script>

 

转载于:https://www.cnblogs.com/WhiteM/p/6024488.html