通过学习，我发现当同一个ul下的li标签如果想要不同的效果，那怎么办？
比如第一个li是width变化，第二个li为透明度(opacity)变化，而opacity的值和width的值类型不同，不能通用那怎么办？
而设置两个函数，只为了，两个值变化就显得太过麻烦，通过学习，我发现可以通过一些方法来实现
代码如下
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
} li {
list-style: none;
width: 200px;
height: 100px;
margin: 10px;
background: pink;
border: 1px solid blue;
filter: alpha(opacity: 30);
opacity: 0.3;
}
</style>
</head> <body> <ul id="show">
<li id="btn1"></li>
<li id="btn2"></li>
</ul> </body> </html>
js部分用了一些新的方法，可以看注释，还不清楚可以自行百度
<script type="text/javascript">
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
}
window.onload = function() { var btn1 = $("btn1");
var btn2 = $("btn2");
var speed = 0; btn1.onmouseenter = function() {
changeBtn(this, 'width', 400);
} btn1.onmouseleave = function() {
changeBtn(this, 'width', 200);
} btn2.onmouseenter = function() {
changeBtn(this, 'opacity', 100);
} btn2.onmouseleave = function() {
changeBtn(this, 'opacity', 30);
} //obj为当前的鼠标所指向的标签
//stChg为对应的变量样式
//chgWid为需要改变的值
function changeBtn(obj, stChg, chgWid) {
clearInterval(obj.timer); obj.timer = setInterval(function() {
//chg这个变量本来为长度，宽度，或者透明度什么的
//但是现在通过一个getStyle()函数来获取
var chg = 0;
//进入函数，需要先判定是否透明度样式
if (stChg == 'opacity') {
//为真，则执行parseFloat()此方法返回的是浮点数
chg = Math.round(parseFloat(getStyle(obj, stChg)) * 100);
} else {
//为假，则执行parseInt()此方法返回的是整数
chg = parseInt(getStyle(obj, stChg));
}
//判定初始值(chg)是否小于输入值(chgWid)
if (chg < chgWid) {
speed = 10;
} else {
speed = -10;
}
//console.log(speed);
if (chg == chgWid) {
//相等时候，则清楚定时器
clearInterval(obj.timer);
} else {
//不相等时，则先进性判定样式是否为特殊样式opacity
if (stChg == 'opacity') {
//为真，对应其他浏览器，则执行(chg+speed)=当前样式的值+speed
//比如开始是(30+10),那么下一次就为(40+10)
obj.style.opacity = (chg + speed) / 100;
//为真，对应的ie浏览器，方法同上
obj.style.filter = 'alpha(opacity: ' + (chg + speed) + ')';
} else {
//为假则为普通样式取值，stChg为width时style[width]=style.width
obj.style[stChg] = chg + speed + 'px';
}
}
}, 30);
} //这个函数返回的是一个值，例如attr传参为width
//为真时obj.currentStyle[attr]=200
function getStyle(obj, attr) {
if (obj.currentStyle) {
//currentStyle获取样式的值，对应的是ie浏览器
return obj.currentStyle[attr];
} else {
//同理，对应的是其他浏览器
return getComputedStyle(obj, false)[attr];
}
} }
</script>