                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

完美運(yùn)動框架，不能實(shí)現(xiàn)鏈?zhǔn)竭\(yùn)動哇！

按照這個方式寫下來，同時(shí)運(yùn)動是實(shí)現(xiàn)了，可是鏈?zhǔn)竭\(yùn)動做不了哇。。求解！難道要用兩套不一樣的嗎？

me_is_hero

2015-03-19

源自：JS動畫效果 6-2

關(guān)注問題我要回答

1711

操作

收起

8 回答

林青石
2015-08-26

function?startMove(obj,json,fnEnd){
	clearInterval(obj.timer);
	obj.timer?=?setInterval(function(){
		doMove(obj,json,fnEnd);
	},30);
}
function?doMove(obj,json,fnEnd){
	var?iCur?=?0;
	var?attr?=?null;
	var?bStop?=?true;
	for(attr?in?json){
		if(attr=='opacity'){
			//if(parseInt(100*getStyle(obj,attr))==0){
				//iCur?=?parseInt(100*getStyle(obj,attr));
			//}
			iCur=Math.round(parseFloat(getStyle(obj,attr))*100);
			//else{
				//iCur?=?parseInt(100*getStyle(obj,attr))?||?100;
		?????//}
		}
		else{
			iCur?=?parseInt(getStyle(obj,attr))?||?0;
		}
		var?iSpeed?=?(json[attr]?-?iCur)/5;
		iSpeed?=?(iSpeed>0)???Math.ceil(iSpeed)?:?Math.floor(iSpeed);
		if(json[attr]!=iCur){
			bStop?=?false;
		}
		if(attr=='opacity'){
			obj.style.filter?=?'alpha(opacity='+?(iCur?+?iSpeed)?+')';
			obj.style.opacity?=?(iCur?+?iSpeed)/100;
		}
		else{
			obj.style[attr]?=?iCur?+?iSpeed?+?'px';
		}	
	}
	if(bStop){
		clearInterval(obj.timer);
		if(fnEnd){
			fnEnd.call(obj);
			
		}
	}
}
function?stopMove(obj){
	clearInterval(obj.timer);
}
function?getStyle(obj,attr){
	if(obj.currentStyle){
		return?obj.currentStyle[attr];
	}
	else{
		return?getComputedStyle(obj)[attr];
	}
}

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

林青石

完美運(yùn)動框架拿去研究用吧

2015-08-26 回復(fù) 有任何疑惑可以回復(fù)我~

韓小亖
2015-07-22

你把startMove(oDiv,{width:301,top:100,opacity:100}中的width變大一點(diǎn)，比如400，就可以了。感覺是width變化時(shí)間太短導(dǎo)致的

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

林青石
2015-07-11

不對應(yīng)該這么寫就沒事了

if (icon==json[attr])
? ??? ??? ?{
? ??? ??? ??? ?flag=true;

? ??? ??? ?}else{
? ??? ??? ??? ?flag=false;
? ??? ??? ?}

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

MIS_Lu

你好，這樣寫還是有問題啊。。就是同時(shí)運(yùn)動達(dá)不到效果，請問你有遇到嗎

2015-08-21 回復(fù) 有任何疑惑可以回復(fù)我~

林青石
2015-07-11

我本以為我解決了問題? 不過又出來一堆問題? 大家多交流解決吧

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

林青石
2015-07-11

是這老師不夠嚴(yán)謹(jǐn) 還是怎么? 他是不是漏了點(diǎn)代碼

if (icon!=json[attr])
? ??? ??? ?{
? ??? ??? ??? ?flag=false;

? ??? ??? ?}else{
? ??? ??? ??? ?flag=true;
? ??? ??? ?}

else語句沒寫導(dǎo)致flag無法獲得true值? 以致整個if(flag)都沒執(zhí)行，你們的鏈?zhǔn)竭\(yùn)動GG了

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

七月小麥麥
2015-06-17

我也是這樣的，怎么回事？代碼如下：

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>運(yùn)動框架最終版</title>
<script?type="text/javascript"?src="move.js"></script>
<style?type="text/css">
*{margin:0;padding:0;}
div{margin:0?auto;width:300px;height:200px;border:4px?solid?#FF0;background:#000;filter:alpha(opacity:30);opacity:0.3;position:relative;top:0;}
</style>
<script?type="text/javascript">
window.onload=function?()?{
var?oDiv=document.getElementById("box");
oDiv.onmouseover=function?()?{
startMove(oDiv,{width:301,top:100,opacity:100},function?()?{
alert(1)
});
}
oDiv.onmouseout=function?()?{
startMove(oDiv,{width:300,top:0,opacity:30});
}
}
//獲取樣式
function?getStyle?(obj,attr)?{
??if?(obj.currentStyle)?{
????return?obj.currentStyle.attr;
??}?else{
????return?getComputedStyle(obj,false)[attr];
??};
}

//運(yùn)動函數(shù)
function?startMove?(obj,json,fn)?{
??var?flag=true;?????????????//假設(shè)所有運(yùn)動都達(dá)到了目標(biāo)值
??clearInterval(obj.timer);
??obj.timer=setInterval(function(){
??//遍歷json中的值
????for(var?attr?in?json){
??//計(jì)算速度
??var?iCur=parseInt(getStyle(obj,attr))?
????if?(attr=="opacity")?{
?????iCur=Math.round(parseFloat(getStyle(obj,attr))*100);
????}?
??????speed=(json[attr]-iCur)/20;
??????speed=speed<0?Math.floor(speed):Math.ceil(speed)
??//判斷所有屬性是否達(dá)到目標(biāo)值
??????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";
??????};
??//判斷所有屬性是否達(dá)到目標(biāo)值
??????if?(flag)?{
????????clearInterval(obj.timer);
??//判斷是否有需要執(zhí)行的下一個函數(shù)
????????if?(fn)?{
??????????fn();
????????}?
????}
??}
??},30)
}
</script>
</head>
<body>
<div?id="box"></div>
</body>
</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答