在编写多块同时触发运动的时候,发现一个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>