javascript动画效果之多物体透明度

html和css 仅为布局，需要注意的是filter对应的是老版本的ie浏览器透明度，而opacity对应的其他浏览器的透明度

filter: alpha(opacity: 50);
opacity: 0.5;
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        
        div {
            margin: 10px;
            height: 360px;
            width: 200px;
        }
        
        ul {
            list-style: none;
        }
        
        ul li {
            width: 200px;
            height: 100px;
            background: blue;
            margin-bottom: 20px;
            cursor: pointer;
            filter: alpha(opacity: 50);
            opacity: 0.5;
        }
    </style>
</head>

<body>
    <div>
        <ul id="squLi">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    
</body>

</html>

js部分也是通过for循环来给每个li标签都加入一个鼠标触发事件

 1 <script type="text/javascript">
 2         function $(id) {
 3             return typeof id === "string" ? document.getElementById(id) : id;
 4         }
 5         window.onload = function() {
 6             //自定义变量为li标签的集合
 7             var aLi = $("squLi").getElementsByTagName("li");
 8 
 9             //通过for循环给每个li都添加一个触发效果
10             for (var i = 0; i < aLi.length; i++) {
11                 //每个li都需要一个单独的定时器，避免冲突
12                 aLi[i].timer = null;
13                 //设置每一个li初始的透明度为50，避免冲突
14                 aLi[i].alpha = 50;
15                 //绑定事件
16                 aLi[i].onmouseenter = function() {
17                     //调用自定义函数，并传参(需要达到的透明度为100)
18                     squartLi(this, 100);
19                 }
20                 //绑定事件
21                 aLi[i].onmouseleave = function() {
22                     //调用同一个自定义函数，传参(离开时透明度为50)
23                     squartLi(this, 50);
24                 }
25             }
26 
27             //自定义函数，自定义参数obj和onAlpha
28             function squartLi(obj, onAlpha) {
29                 //一个li同一时间只需要一个定时器，所以事件触发时，要清除已经触发的定时器
30                 clearInterval(obj.timer);
31                 //定时器
32                 obj.timer = setInterval(function() {
33                     //鼠标进入obj.alpha为50，onAlpha为100，所以+10
34                     if (obj.alpha < onAlpha) {
35                         obj.alpha += 10;
36                     } else {
37                         //离开时，obj.alpha为100，onAlpha为50，所以-10
38                         obj.alpha -= 10;
39                     }
40                     if (obj.alpha == onAlpha) {
41                         //当为50或者100则达到要求，清除定时器
42                         clearInterval(obj.timer);
43                     } else {
44                         //老版本ie
45                         obj.style.filter = 'alpha(opacity: ' + obj.alpha + ');'
46                         //其他浏览器
47                         obj.style.opacity = obj.alpha / 100;
48                     }
49 
50                 }, 30);
51             }
52 
53         }
54     </script>

 

posted @ 2016-11-03 09:40  rookieM  阅读(289)  评论(0)  编辑  收藏  举报