您的位置：首页 > Web前端 > JavaScript

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

2016-11-03 09:40 381 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航