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

動(dòng)畫案例那一節(jié)的問(wèn)題

圖案的top值
a.從初始值20變到-25
b.再變?yōu)?0
c.再由30變回20

我做出來(lái)的效果:
b和c是連續(xù)的，a和b+c之間要隔一會(huì)，就是說(shuō)兩個(gè)鏈?zhǔn)竭\(yùn)動(dòng)不連續(xù)，而且中途鼠標(biāo)放上去就不能移出了，要不然abc整個(gè)過(guò)程就會(huì)中斷，下一次鼠標(biāo)放上去初始值就不是20，這應(yīng)該是哪出問(wèn)題了？

慕用9244143

2017-04-05

源自：JS動(dòng)畫效果 6-2

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

1076

操作

收起

6 回答

東方既白233 回答被采納 +3 積分
2017-04-09

這是因?yàn)槟阋_定你設(shè)置的多運(yùn)動(dòng)都完成后才去清除定時(shí)器，這個(gè)flag就是用來(lái)判斷你設(shè)置的所有運(yùn)動(dòng)，比如高度寬度透明度是否都達(dá)到了目標(biāo)值，flag才為true，否則之前flag會(huì)變成flase，不執(zhí)行清除定時(shí)器

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

收起回答

#1

東方既白233

有問(wèn)題可以互相關(guān)注討論，我也是新手小白

2017-04-09 回復(fù) 有任何疑惑可以回復(fù)我~

慕用9244143 提問(wèn)者
2017-04-09

嗯，剛才粘錯(cuò)文件了，看了別人的提問(wèn)，我的問(wèn)題出在JS文件里，要把var flag=true;放在定時(shí)器里面，就解決了，可是還不太明白為什么

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

收起回答

東方既白233
2017-04-09

var obj=document.getElementsByTagName("a");

for (var i = 0; i < obj.length; i++) {

obj[i].onmouseenter=function(){

var mu=this.getElementsByTagName("img")[0];

objMove(mu,{"top":-10,"opacity":0},5,function(){

mu.style.top=70+"px";

mu.style.opacity=0;

objMove(mu,{"top":12,"opacity":100},2);

});

};

對(duì)比一下，你就知道你寫差中間兩句了。

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

收起回答

#1

慕用9244143 提問(wèn)者

嗯，剛才粘錯(cuò)文件了，看了別人的提問(wèn)，我的問(wèn)題出在JS文件里，要把var flag=true;放在定時(shí)器里面，就解決了，可是還不太明白為什么

2017-04-09 回復(fù) 有任何疑惑可以回復(fù)我~

東方既白233
2017-04-09

?window.onload=function(){

????????var?move=document.getElementById('move');

????????var?alis=move.getElementsByTagName('a');

????????for?(var?i=0;i<alis.length;i++)

????????{

????????????alis[i].onmouseover=function()

????????????{

????????????????var?ths=this.getElementsByTagName('i')[0];

????????????????start(ths,{top:-25,opacity:0},function(){

????????????????????start(ths,{top:20,opacity:100});

????????????????});

????????????}

????????}

?????????

????}

你這部分的代碼寫差了吧。還是說(shuō)你自己復(fù)制張貼差了？

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

收起回答

慕用9244143 提問(wèn)者
2017-04-09

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>無(wú)標(biāo)題文檔</title>
<style?type="text/css">
div?p{
	font-size:22px;
	font-family:"Courier";
}
a:hover{
	color:#39C;
}
div?a{
	position:relative;
	cursor:pointer;
	display:inline-block;
	border:1px?solid;
	background:#FFFFB0;
	width:120px;
	height:120px;
	
	text-align:center;
	margin:20px;
	border-radius:10px;
}

div?a?i{
	position:relative;
	top:20px;
	left:0px;
	width:100%;
	text-align:center;
	display:inline-block;
	opacity:1;
	filter:alpha(opacity=100);
}


#move{
	text-align:center;
	width:50%;
	height:80%;
	border-radius:10px;
	background:#E2E2E2;
}
</style>
<script?src="linkMove.js"></script>
<script>
	window.onload=function(){
		var?move=document.getElementById('move');
		var?alis=move.getElementsByTagName('a');
		for?(var?i=0;i<alis.length;i++)
		{
			alis[i].onmouseover=function()
			{
				var?ths=this.getElementsByTagName('i')[0];
				start(ths,{top:-25,opacity:0},function(){
					start(ths,{top:20,opacity:100});
				});
			}
		}
		
	}
</script>
</head>

<body>
<center>
<div??id="move">
<a><i><img?src="icons/icon8.png"/></i><p>blossom</p></a>
<a><i><img?src="icons/icon12.png"?/></i><p>card</p></a>
<a><i><img?src="icons/icon17.png"?/></i><p>violin</p></a>
<a><i><img?src="icons/icon14.png"/></i><p>airplane</p></a>
<a><i><img?src="icons/icon13.png"?/></i><p>lollipop</p></a>
<a><i><img?src="icons/icon11.png"?/></i><p>hamburger</p></a>


</div>
</center>

</body>
</html>

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

收起回答