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>