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

javascript动画效果之透明度

2016-11-02 09:59 369 查看

在css中的filter对应老版本的ie浏览器，opacity对应的是其他浏览器

1 <!DOCTYPE html>
2 <html>
3
4 <head>
5     <meta charset="UTF-8">
6     <title>Document</title>
7     <style type="text/css">
8         * {
9             margin: 0;
10             padding: 0;
11             font-size: 12px;
12         }
13
14         div {
15             width: 200px;
16             height: 200px;
17             background: green;
18             filter: alpha(opacity: 30);
19             opacity: 0.3;
20         }
21     </style>
22 </head>
23
24 <body>
25     <div id="div">
26
27     </div>
28
29
30 </body>
31
32 </html>

js中需要在开始自增和开始自减前清除定时器，否则当鼠标多次移动，则会无限叠加自增和自减

1 <script>
2         function $(id) {
3             return typeof id === "string" ? document.getElementById(id) : id;
4         }
5
6         window.onload = function() {
7             //自定义变量div
8             var div = $("div");
9             //定义一个定时器timer
10             var timer = null;
11             //定义一个变量用于透明度自增减
12             var alpha = 30;
13
14             //定义一个鼠标移进的事件
15             div.onmouseenter = start;
16
17             //定义一个函数
18             function start() {
19                 //当鼠标移动次数过多，会叠加自增，所以需要在开始时，清除定时器
20                 clearInterval(timer);
21                 //定时器用于自动增加
22                 timer = setInterval(show, 30);
23             }
24
25             //自定义函数用于透明度的自动增加
26             function show() {
27                 if (alpha < 100) {
28                     alpha += 10;
29                     //ie浏览器
30                     div.style.filter = 'alpha(opacity: ' + alpha + ');'
31                         //其他浏览器
32                     div.style.opacity = alpha / 100;
33                 }
34             }
35
36             //定义一个鼠标移出事件
37             div.onmouseleave = back;
38
39             //定义一个函数
40             function back() {
41                 //当鼠标移动次数过多，会叠加自减，所以需要在开始时，清除定时器
42                 clearInterval(timer);
43                 //定时器用于自动减少
44                 timer = setInterval(clear, 30);
45             }
46
47             //自定义函数用于透明度的自动减少
48             function clear() {
49                 if (alpha > 30) {
50                     alpha -= 10;
51                     //ie浏览器
52                     div.style.filter = 'alpha(opacity: ' + alpha + ');'
53                         //其他浏览器
54                     div.style.opacity = alpha / 100;
55                 }
56             }
57
58
59         }
60     </script>

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

标签：

相关文章推荐

新的分享

章节导航