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