<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{padding:0px;margin:0px;}
ul{ list-style:none;}
ul li{width:200px; height:100px;margin-top:20px; background-color:#FF00CE;border:#000 4px solid;font-size:20px;color:#eee;filter:alpha(opacity:30);opacity:0.3;}
</style>
<script>
function getStyle(obg,attr){
if(obg.currentStyle){
return obg.currentStyle[attr];
//currentStyle 针对IE浏览器
}
else{
return getComputedStyle(obg,false)[attr];
//getComputedStyle 针对firefox浏览器
}
}
function acticeMove(obg,json,fn){
clearInterval(obg.timer);
obg.timer=setInterval(function(){
//取当前值
for(var attr in json){
var icur=0;
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obg,attr))*100);
}else{
icur=parseInt(getStyle(obg,attr));}
//算速度；
var speed=(json[attr]-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//检测停止
if(icur==json[attr]){
clearInterval(obg.timer);
if(fn){
fn();
}
}
else{
if(attr=='opacity'){
obg.style.filter='alpha:(opacity:'+icur+speed+')';
obg.style.opacity=(icur+speed)/100;
}
else{
obg.style[attr]=icur+speed+'px'; }
}
}
}
,30)
}
window.onload=function(){
var oli=document.getElementById('li1');
oli.onmouseover=function()
{
acticeMove(oli,{width:400,height:200,opacity:100});
}
oli.onmouseout=function()
{
acticeMove(oli,{width:200,height:100,opacity:30});
}
}
</script>
</head>
<body>
<ul>
<li id="li1">ssetgt</li>
</ul>
</body>
</html>
视频10：53处有解决方法