<!DOCTYPE?html>
<html>
<head>
????<title>20160218</title>
????<style?type="text/css">
????*{padding:?0;margin:0;}
????ul?li{
????????width:300px;
????????height:?100px;
????????background-color:?red;
????????margin-bottom:20px;?
????????border:5px?solid?green;
????}
????</style>
????<script?type="text/javascript">
????window.onload=function(){
????????var?opp=document.getElementsByTagName("li");
????????for?(var?i=0;i<opp.length;i++){
????????????opp[i].timer=null;//為什么var?opp[i].timer;不行？
????????????opp[i].onmouseover=function(){
????????????????startMove(this,500);
????????????}
????????????opp[i].onmouseout=function(){
????????????????startMove(this,300);
????????????}
????????}
????}
????
???
?????function?startMove(obj,iTarget){
????????????????clearInterval(obj.timer);
????????????????obj.timer=setInterval(function(){
????????????????????var?icur?=?parseInt(getStyle(obj,"width"));
????????????????????var?speed=(iTarget-icur)/8;
????????????????????speed?=?speed>0?Math.ceil(speed):Math.floor(speed);
????????????????????if(icur==iTarget){
????????????????????????clearInterval(obj.timer);
????????????????????}
????????????????????else{
????????????????????????obj.style[attr]=icur+speed+'px';
????????????????????}
????????????????},30)
????????????}
????
????function?getStyle(obj,attr){
????????if?(obj.currentStyle){
???????????return?obj.currentStyle[attr];
????????}else{
???????????return?getComputedStyle(obj,false)[attr];
????????}
????}
????</script>
</head>
<body>
<ul>
????<li></li>
????<li></li>
????<li></li>
</ul>
</body>
</html>
2016-02-20
第44行的attr沒有定義，應該把attr換成'width'，因為attr是在getStyle()里面的局部變量，離開了getStyle()就會銷毀