                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /JS動(dòng)畫(huà)效果

將一個(gè)div套進(jìn)li，用鏈?zhǔn)絼?dòng)畫(huà)設(shè)置了兩者，結(jié)果了奇怪的問(wèn)題……

<!DOCTYPE?HTML>
<html>
??<head>
????<meta?charset="UTF-8">
????<title>JS動(dòng)畫(huà)/鏈?zhǔn)絼?dòng)畫(huà)</title>
????<style?type="text/css">
??????*{
????????margin:?0;
????????padding:?0;
??????}
??????li{
????????width:?200px;
????????height:?100px;
????????background-color:?#f60;
????????border:?2px?solid?#06f;
????????opacity:?0.3;
??????}
??????#li3,#li4{
????????display:flex;
????????justify-content:center;
????????align-items:center;
??????}
??????#one,#two{
????????width:?50px;
????????height:?50px;
????????background-color:?#0ff;
????????border-radius:?50%;
????????margin:?auto;
??????}
????</style>
????<script?src="js/startMove.js"></script>
????<script?src="js/startMove2.js"></script>
????<script>
??????window.onload?=?function(){
????????/*這些運(yùn)動(dòng)的順序沒(méi)有嚴(yán)格要求
?????????*比如onmouseover的順序?yàn)椋簩?>高->透明度
?????????*那么onmouseout可以是：透明度->高->寬,也可以是：高->寬->透明度
?????????*/
????????//鏈?zhǔn)竭\(yùn)動(dòng)
????????var?li1?=?document.getElementById("li1");
????????li1.timer?=?null;
????????li1.onmouseover?=?function(){
??????????startMove(li1,?"height",?200,?function(){
????????????startMove(li1,?"width",?400,?function(){
??????????????startMove(li1,?"opacity",?100);
????????????});
??????????});
????????};
????????li1.onmouseout?=?function(){
??????????startMove(li1,?"opacity",?30,?function(){
????????????startMove(li1,?"width",?200,?function(){
??????????????startMove(li1,?"height",?100);
????????????});
??????????});
????????};
????????//同步運(yùn)動(dòng)
????????var?li2?=?document.getElementById("li2");
????????li2.timer?=?null;
????????li2.onmouseover?=?function(){
??????????startMove2(li2,?{width:400,?height:200,?opacity:100});
????????};
????????li2.onmouseout?=?function(){
??????????startMove2(li2,?{opacity:30,?height:100,?width:200});
????????};
????????//同步運(yùn)動(dòng)+鏈?zhǔn)竭\(yùn)動(dòng)
????????var?li3?=?document.getElementById("li3");
????????var?one?=?document.getElementById("one");
????????li3.timer?=?null;
????????li3.onmouseover?=?function(){
??????????startMove2(li3,?{width:400,?height:200,?opacity:100},?function(){
??????????????startMove2(one,?{width:200,?height:200});
??????????});
????????};/*
????????li3.onmouseout?=?function(){
??????????startMove2(li3,?{opacity:30,?height:100,?width:200},?function(){
??????????????startMove2(one,?{width:50,?height:?50});
??????????});
????????};*/
????????//與上面那個(gè)執(zhí)行順序不同
????????//點(diǎn)擊圓時(shí)無(wú)反應(yīng)
????????//猜測(cè)：優(yōu)先級(jí)的問(wèn)題
????????li3.onmouseout?=?function(){
??????????startMove2(one,?{height:50,?width:50},?function(){
??????????????startMove2(li3,?{opacity:30,?width:200,?height:?100});
??????????});
????????};
????????//鏈?zhǔn)竭\(yùn)動(dòng)+同步運(yùn)動(dòng)
????????var?li4?=?document.getElementById("li4");
????????li4.timer?=?null;
????????li4.onmouseover?=?function(){
??????????startMove(li4,?"height",?200,?function(){
????????????startMove(li4,?"width",?400,?function(){
??????????????startMove(li4,?"opacity",?100,?function(){
????????????????startMove2(two,?{width:200,?height:200});
??????????????});
????????????});
??????????});
????????};/*
????????li4.onmouseout?=?function(){
??????????startMove(li4,?"opacity",?30,?function(){
????????????startMove(li4,?"width",?200,?function(){
??????????????startMove(li4,?"height",?100,?function(){
????????????????startMove2(two,?{width:50,?height:50});
??????????????});
????????????});
??????????});
????????};*/
????????//與上面那個(gè)執(zhí)行順序不同
????????//點(diǎn)擊圓時(shí)無(wú)反應(yīng)
????????li4.onmouseout?=?function(){
??????????startMove2(two,?{width:50,?height:50},?function(){
????????????startMove(li4,?"opacity",?30,?function(){
??????????????startMove(li4,?"width",?200,?function(){
????????????????startMove(li4,?"height",?100);
??????????????});
????????????});
??????????});
????????};
??????}
????</script>
??</head>

??<body>
????<ul>
??????<li?id="li1"></li>
??????<li?id="li2"></li>
??????<li?id="li3">
????????<div?id="one"></div>
??????</li>
??????<li?id="li4">
????????<div?id="two"></div>
??????</li>
????</ul>
??</body>
</html>

function?startMove2(obj,?json,?func){
	//避免重復(fù)點(diǎn)擊
	clearInterval(obj.timer);

	//計(jì)時(shí)器
	obj.timer?=?setInterval(function(){
	????//假設(shè)運(yùn)動(dòng)完成
	????var?flag?=?true;
	????//遍歷每個(gè)屬性
		for(var?attr?in?json){
			var?current?=?0;
			//獲得當(dāng)前屬性的值
			//區(qū)別透明屬性和寬、高等屬性值
			if(attr?==?"opacity"){
				current?=?Math.round(parseFloat(getStyle(obj,attr))*100);
			}
			else?{
????????	????current?=?parseInt(getStyle(obj,?attr));
????	????}

			//計(jì)算速度
			var?speed?=?(json[attr]?-?current)/8;
			speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed);

			//檢測(cè)停止
			if(current?!=?json[attr]){
				flag?=?false;
			}
			if(attr?==?"opacity"){
				obj.style.filter?=?"alpha:(opacity"?+?current?+?speed?+?")";
				obj.style.opacity?=?(current?+?speed)/100;
			}
			else{
				obj.style[attr]?=?current?+?speed?+?"px";
			}
		}
		//檢測(cè)停止
		if(flag){
			clearInterval(obj.timer);
			if(func){
				func();
			}
		}
	},?30);
}

function?getStyle(obj,?attr){
	if(obj.currentStyle){
		return?obj.currentStyle[attr];
	}
	else{
		return?getComputedStyle(obj,?null)[attr];
	}
}

沒(méi)想明白為什么li3.onmouseout設(shè)置li3套o(hù)ne沒(méi)問(wèn)題，但是one套li3就出現(xiàn)問(wèn)題了，鼠標(biāo)只要滑到圓點(diǎn)上就無(wú)法執(zhí)行動(dòng)畫(huà)效果，是優(yōu)先級(jí)的問(wèn)題么？但是這樣li3套o(hù)ne也應(yīng)該出現(xiàn)相同問(wèn)題才對(duì)……想不通