欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > javascript >内容正文

javascript

javascript动画效果之透明度

发布时间：2024/4/17 javascript 64 豆豆
生活随笔 收集整理的这篇文章主要介绍了 javascript动画效果之透明度 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

在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>

 

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

总结

以上是生活随笔为你收集整理的javascript动画效果之透明度的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。