<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<style>
????????*{
????????????margin:0;
????????????padding:0;
????????}
????????ul{
????????????list-style:?none;
????????}
????????ul?li{
????????????width:200px;
????????????height:?80px;
????????????background:?red;
????????????margin-bottom:?20px;
????????????border:?4px?solid?black;
????????}
????</style>
????<script>
????????window.onload=function(){
????????????var?Lis?=?document.getElementsByTagName("li");
????????????for?(var?i?=?0?;?i<Lis.length;i++){
????????????????Lis[i].timer?=?null;
????????????????Lis[i].onmouseover?=?function(){
????????????????????startMove(this,'width',400);
????????????????};
????????????????Lis[i].onmouseout?=?function(){
????????????????????startMove(this,'width',200);
????????????????}
????????????}
????????????function?startMove(obj,attr,target){
????????????????????clearInterval(obj.timer);
????????????????????obj.timer?=?setInterval(function(){
????????????????????var?icur?=?parseInt(getStyle(obj,attr));
????????????????????var?speed?=?(target?-?icur)/8;
????????????????????speed?=?speed?>?0???Math.floor(speed)?:?Math.ceil(speed);
????????????????????if(icur?==?target){
????????????????????????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>
2015-12-26
?speed?=?speed?>?0???Math.floor(speed)?:?Math.ceil(speed);
這一句換一下：
?speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed);
這樣才能保證速度不為0；不然width差值小于8時速度就為0了，width就不變了，一直達不到200和400