用運(yùn)動(dòng)框架應(yīng)用鏈?zhǔn)竭\(yùn)動(dòng)出現(xiàn)的錯(cuò)誤
function?start(obj,json,fn){
????clearInterval(obj.timer);
????obj.timer=setInterval(function(){
????????var?flag=true;
????????for(var?attr?in?json){
????????????//取當(dāng)前值
????????????if(attr=='opacity'){
????????????????iCur=Math.round(parseFloat(getStyle(obj,attr))*100);
????????????}else{
????????????????iCur=parseInt(getStyle(obj,attr));
????????????}
????????????//算速度
????????????var?speed=(json[attr]-iCur)/8;
????????????speed=?speed>0???Math.ceil(speed)?:?Math.floor(speed);
????????????//檢測(cè)停止
????????????if(iCur!=json[attr])?{
????????????????flag?=?false;
????????????}
????????????if(attr=='opacity'){
????????????????obj.style.filter='alpha(opacity:'+(iCur+speed)+')';
????????????????obj.style.opacity=(iCur+speed)/100;
????????????}else{
????????????????obj.style[attr]=iCur+speed+'px';
????????????}
????????}
????????if(flag==true){
????????????clearInterval(obj.timer);
????????}
????????if(fn){
????????????fn();
????????}
????},30)
}
function?getStyle(obj,attr){
????if(obj.currentStyle){
????????return?obj.currentStyle[attr];
????}else{
????????return?getComputedStyle(obj,false)[attr];
????}
}<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>鏈?zhǔn)竭\(yùn)動(dòng)</title>
? ?<style>
*{margin: 0;padding: 0}
? ? ? ?ul,li{list-style: none;}
? ? ? ?ul li{position:absolute;left:0px;width: 200px;height:100px;background: yellow;margin-bottom: 20px;border: 3px solid #1e90ff;filter: alpha(opacity:30);opacity: .3;}
? ?</style>
? ?<script src="animation.js"></script>
? ?<script>
window.onload=function(){
? ? ? ? ? ?var li=document.getElementById('li');
li.onmouseover=function(){
? ? ? ? ? ? ? ?start(li,{left:100},function(){
? ? ? ? ? ? ? ? ? ?start(li,{width:400},function(){
? ? ? ? ? ? ? ? ? ? ? ?start(li,{height:200},function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ?start(li,{opacity:100})
? ? ? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ?})
? ? ? ? ? ?};
li.onmouseout=function(){
? ? ? ? ? ? ? ?start(li,{opacity:30},function(){
? ? ? ? ? ? ? ? ? ?start(li,{height:100},function(){
? ? ? ? ? ? ? ? ? ? ? ?start(li,{width:200},function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ?start(li,{left:0})
? ? ? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ?})
? ? ? ? ? ?};
}
? ?</script>
</head>
<body>
? ?<ul>
? ? ? ?<li id="li"></li>
? ?</ul>
</body>
</html>
代碼如上，出現(xiàn)的問題是每次移入鼠標(biāo)長(zhǎng)寬都會(huì)增加一點(diǎn)，但透明度會(huì)到達(dá)1，然后移開之后，透明度只會(huì)恢復(fù)到0.9左右，然后再次移入鼠標(biāo)，長(zhǎng)寬又會(huì)增加一點(diǎn)。
2016-08-06
var?flag=true;這個(gè)要在for循環(huán)里面；
在下面再定義一個(gè)變量var?iCur = 0； ?你的這個(gè)還沒定義；
你的?
if(fn){
????????????fn();
????????}
這個(gè)要在if(flag){}這個(gè)判斷里面