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

兩種運(yùn)動(dòng)同事進(jìn)行怎么實(shí)現(xiàn)？

<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8"/>
<title>多物體運(yùn)動(dòng)</title>
<style?type="text/css">
*{
	margin:?0;
	padding:?0;		
}
ul,li{
	list-style:?none;
}
ul?li{
	width:?200px;
	height:?100px;
	background:?red;
	margin-bottom:?20px;
	filter:alpha(opacity:30);
	opacity:?0.3;
}
</style>
<script>
window.onload?=?function(){
	var?aLi?=?document.getElementsByTagName('li');
	for(var?i?=?0;i?<?aLi.length;i++){
		aLi[i].timer?=?null;
		aLi[i].alpha?=?30;
		aLi[i].onmouseover?=?function(){
			startMove(this,400);
			changeColor(this,100);
		}
		aLi[i].onmouseout?=?function(){
			startMove(this,200);
			changeColor(this,30);
		}
	}
}
function?startMove(obj,iTarget){
	clearInterval(obj.timer);
	obj.timer?=?setInterval(function(){
		var?speed?=?(iTarget-obj.offsetWidth)/10;
		speed?=?speed>0?Math.ceil(speed):Math.floor(speed);
		if(iTarget?==?obj.offsetWidth){
			clearInterval(obj.timer);
		}
		else{
			obj.style.width?=?obj.offsetWidth+speed+'px';
		}
	},30)
}
function?changeColor(obj,iTarget){
	clearInterval(obj.timer);
	obj.timer?=?setInterval(function(){
		var?speed?=?(iTarget?-?obj.alpha)/10;
		speed?=?speed>0?Math.ceil(speed):Math.floor(speed);
		if?(iTarget?==?obj.alpha)?{
			clearInterval(obj.timer);
		}
		else{
			obj.alpha+=speed;
			obj.style.filter?=?'alpha(opacity:'+obj.alpha+')';
			obj.style.opacity?=?obj.alpha/100;
		}
	},30)
}
</script>
</head>
<body>
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
</body>
</html>

如果要實(shí)現(xiàn)offseWidth和opacity同時(shí)變化要怎樣實(shí)現(xiàn)？上述方法為什么不能實(shí)現(xiàn)？請(qǐng)大神指教

IURIL

2015-10-19

源自：JS動(dòng)畫(huà)效果 4-1

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

1033

操作

收起

3 回答

Y_du 回答被采納 +3 積分
2015-10-19

是因?yàn)槟愣〞r(shí)器同名了，把第一個(gè)定時(shí)器的名稱(chēng)換成與第二個(gè)不一樣就好了。

<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8"/>
<title>多物體運(yùn)動(dòng)</title>
<style?type="text/css">
*{
????margin:?0;
????padding:?0;???????
}
ul,li{
????list-style:?none;
}
ul?li{
????width:?200px;
????height:?100px;
????background:?red;
????margin-bottom:?20px;
????filter:alpha(opacity:30);
????opacity:?0.3;
}
</style>
<script>
window.onload?=?function(){
????var?aLi?=?document.getElementsByTagName('li');
????for(var?i?=?0;i?<?aLi.length;i++){
????????aLi[i].timer?=?null;
????????aLi[i].alpha?=?30;
????????aLi[i].onmouseover?=?function(){
????????????startMove(this,400);
????????????changeColor(this,100);
????????}
????????aLi[i].onmouseout?=?function(){
????????????startMove(this,200);
????????????changeColor(this,30);
????????}
????}
}
function?startMove(obj,iTarget){
????clearInterval(obj.timerSpeed);
????obj.timerSpeed?=?setInterval(function(){
????????var?speed?=?(iTarget-obj.offsetWidth)/10;
????????speed?=?speed>0?Math.ceil(speed):Math.floor(speed);
????????if(iTarget?==?obj.offsetWidth){
????????????clearInterval(obj.timerSpeed);
????????}
????????else{
????????????obj.style.width?=?obj.offsetWidth+speed+'px';
????????}
????},30)
}
function?changeColor(obj,iTarget){
????clearInterval(obj.timer);
????obj.timer?=?setInterval(function(){
????????var?speed?=?(iTarget?-?obj.alpha)/10;
????????speed?=?speed>0?Math.ceil(speed):Math.floor(speed);
????????if?(iTarget?==?obj.alpha)?{
????????????clearInterval(obj.timer);
????????}
????????else{
????????????obj.alpha+=speed;
????????????obj.style.filter?=?'alpha(opacity:'+obj.alpha+')';
????????????obj.style.opacity?=?obj.alpha/100;
????????}
????},30)
}
</script>
</head>
<body>
<ul>
????<li></li>
????<li></li>
????<li></li>
</ul>
</body>
</html>

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

收起回答

#1

IURIL 提問(wèn)者

感謝！

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

IURIL 提問(wèn)者
2015-10-20

<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8"/>
<title>多物體運(yùn)動(dòng)</title>
<style?type="text/css">
*{
????margin:?0;
????padding:?0;???????
}
ul,li{
????list-style:?none;
}
ul?li{
????width:?200px;
????height:?100px;
????background:?red;
????margin-bottom:?20px;
????filter:alpha(opacity:30);
????opacity:?0.3;
}
</style>
<script>
window.onload?=?function(){
????var?aLi?=?document.getElementsByTagName('li');
????for(var?i?=?0;i?<?aLi.length;i++){
????????aLi[i].alpha?=?30;
????????aLi[i].onmouseover?=?function(){
????????????startMove(this,'width',400);
????????????startMove(this,'opacity',100);
????????}
????????aLi[i].onmouseout?=?function(){
????????????startMove(this,'width',200);
????????????startMove(this,'opacity',30);
????????}
????}
}
function?startMove(obj,attr,iTarget){
????clearInterval(obj.timer);
????obj.timer?=?setInterval(function(){
????????var?icur?=?0;
????????if(attr?==?'opacity'){
????????????icur?=?Math.round(parseFloat(getStyle(obj,attr))*100);
????????}
????????else{
????????????icur?=?parseInt(getStyle(obj,attr));
????????}
????????var?speed?=?(iTarget-icur)/8;
????????speed?=?speed>0?Math.ceil(speed):Math.floor(speed);
????????if(iTarget?==?icur){
????????????clearInterval(obj.timer);
????????}
????????else{
????????????if(attr?==?'opacity'){
????????????????obj.style.filter?=?'alpha(opacity:'+(icur+speed)+')';
????????????????obj.style.opacity?=?(icur+speed)/100;
????????????}
????????????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>

你好。接上面的問(wèn)題，如果把屬性封裝之后，width和opacity調(diào)用同一函數(shù)的話(huà)，定時(shí)器不同名問(wèn)題該怎么解決？謝謝！

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

收起回答