通过学习，我发现当同一个ul下的li标签如果想要不同的效果，那怎么办？
比如第一个li是width变化，第二个li为透明度(opacity)变化，而opacity的值和width的值类型不同，不能通用那怎么办？
而设置两个函数，只为了，两个值变化就显得太过麻烦，通过学习，我发现可以通过一些方法来实现
代码如下
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 li { 15 list-style: none; 16 width: 200px; 17 height: 100px; 18 margin: 10px; 19 background: pink; 20 border: 1px solid blue; 21 filter: alpha(opacity: 30); 22 opacity: 0.3; 23 } 24 </style> 25 </head> 26 27 <body> 28 29 <ul id="show"> 30 <li id="btn1"></li> 31 <li id="btn2"></li> 32 </ul> 33 34 35 36 </body> 37 38 </html>
js部分用了一些新的方法，可以看注释，还不清楚可以自行百度
1 <script type="text/javascript"> 2 function $(id) { 3 return typeof id === "string" ? document.getElementById(id) : id; 4 } 5 window.onload = function() { 6 7 var btn1 = $("btn1"); 8 var btn2 = $("btn2"); 9 var speed = 0; 10 11 btn1.onmouseenter = function() { 12 changeBtn(this, 'width', 400); 13 } 14 15 btn1.onmouseleave = function() { 16 changeBtn(this, 'width', 200); 17 } 18 19 btn2.onmouseenter = function() { 20 changeBtn(this, 'opacity', 100); 21 } 22 23 btn2.onmouseleave = function() { 24 changeBtn(this, 'opacity', 30); 25 } 26 27 //obj为当前的鼠标所指向的标签 28 //stChg为对应的变量样式 29 //chgWid为需要改变的值 30 function changeBtn(obj, stChg, chgWid) { 31 clearInterval(obj.timer); 32 33 obj.timer = setInterval(function() { 34 //chg这个变量本来为长度，宽度，或者透明度什么的 35 //但是现在通过一个getStyle()函数来获取 36 var chg = 0; 37 //进入函数，需要先判定是否透明度样式 38 if (stChg == 'opacity') { 39 //为真，则执行parseFloat()此方法返回的是浮点数 40 chg = Math.round(parseFloat(getStyle(obj, stChg)) * 100); 41 } else { 42 //为假，则执行parseInt()此方法返回的是整数 43 chg = parseInt(getStyle(obj, stChg)); 44 } 45 //判定初始值(chg)是否小于输入值(chgWid) 46 if (chg < chgWid) { 47 speed = 10; 48 } else { 49 speed = -10; 50 } 51 //console.log(speed); 52 if (chg == chgWid) { 53 //相等时候，则清楚定时器 54 clearInterval(obj.timer); 55 } else { 56 //不相等时，则先进性判定样式是否为特殊样式opacity 57 if (stChg == 'opacity') { 58 //为真，对应其他浏览器，则执行(chg+speed)=当前样式的值+speed 59 //比如开始是(30+10),那么下一次就为(40+10) 60 obj.style.opacity = (chg + speed) / 100; 61 //为真，对应的ie浏览器，方法同上 62 obj.style.filter = 'alpha(opacity: ' + (chg + speed) + ')'; 63 } else { 64 //为假则为普通样式取值，stChg为width时style[width]=style.width 65 obj.style[stChg] = chg + speed + 'px'; 66 } 67 } 68 }, 30); 69 } 70 71 72 //这个函数返回的是一个值，例如attr传参为width 73 //为真时obj.currentStyle[attr]=200 74 function getStyle(obj, attr) { 75 if (obj.currentStyle) { 76 //currentStyle获取样式的值，对应的是ie浏览器 77 return obj.currentStyle[attr]; 78 } else { 79 //同理，对应的是其他浏览器 80 return getComputedStyle(obj, false)[attr]; 81 } 82 } 83 84 } 85 </script>