JS動畫函數：透明度漸變、位置移動、尺寸變化

2024-09-05 12:22:25

字體：大中小

來源：轉載

供稿：網友

基于JavaScript的三個動畫函數，透明度漸變、位置移動、尺寸變化，不喜歡臃腫的JS，所以自己寫了這個，適用于做前端網頁設計，只需要簡單的動畫效果但又不想引入整個動畫類的情況下，可以使用本函數。
　　2、在寫js類時，需要用到簡單的動畫，為了降低藕合性，同樣可用本函數。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script>function rand(min,max){return Math.round(min+(Math.random()*(max-min)));};var fade = function(element, transparency, speed, callback){//透明度漸變：transparency:透明度 0(全透)-100(不透)；speed:速度1-100，默認為1	if(typeof(element)=='string')element=document.getElementById(element);	if(!element.effect){		element.effect = {};		element.effect.fade=0;	}	clearInterval(element.effect.fade);	var speed=speed||1;	var start=(function(elem){		var alpha;		if(navigator.userAgent.toLowerCase().indexOf('msie') != -1){				alpha=elem.currentStyle.filter.indexOf("opacity=") >= 0?(parseFloat( elem.currentStyle.filter.match(/opacity=([^)]*)/)[1] )) + '':				'100';		}else{				alpha=100*elem.ownerDocument.defaultView.getComputedStyle(elem,null)['opacity'];		}		return alpha;	})(element);	if(window.console&&window.console.log)console.log('start: '+start+" end: "+transparency);	element.effect.fade = setInterval(function(){		start = start < transparency ? Math.min(start + speed, transparency) : Math.max(start - speed, transparency);		element.style.opacity =  start / 100;		element.style.filter = 'alpha(opacity=' + start + ')';		if(Math.round(start) == transparency){			element.style.opacity =  transparency / 100;			element.style.filter = 'alpha(opacity=' + transparency + ')';			clearInterval(element.effect.fade);			if(callback)callback.call(element);		}	}, 20);};var move = function(element, position, speed, callback){//移動到指定位置，position:移動到指定left及top 格式{left:120, top:340}或{left:120}或{top:340}；speed:速度 1-100，默認為10	if(typeof(element)=='string')element=document.getElementById(element);	if(!element.effect){		element.effect = {};		element.effect.move=0;	}	clearInterval(element.effect.move);	var speed=speed||10;	var start=(function(elem){		var	posi = {left:elem.offsetLeft, top:elem.offsetTop};		while(elem = elem.offsetParent){			posi.left += elem.offsetLeft;			posi.top += elem.offsetTop;		};		return posi;	})(element);	element.style.position = 'absolute';	var	style = element.style;	var styleArr=[];	if(typeof(position.left)=='number')styleArr.push('left');	if(typeof(position.top)=='number')styleArr.push('top');	element.effect.move = setInterval(function(){		for(var i=0;i<styleArr.length;i++){			start[styleArr[i]] += (position[styleArr[i]] - start[styleArr[i]]) * speed/100;			style[styleArr[i]] = start[styleArr[i]] + 'px';		}		for(var i=0;i<styleArr.length;i++){			if(Math.round(start[styleArr[i]]) == position[styleArr[i]]){				if(i!=styleArr.length-1)continue;			}else{				break;			}			for(var i=0;i<styleArr.length;i++)style[styleArr[i]] = position[styleArr[i]] + 'px';			clearInterval(element.effect.move);			if(callback)callback.call(element);		}	}, 20);};var resize = function(element, size, speed, callback){//長寬漸變：size:要改變到的尺寸 格式 {width:400, height:250}或{width:400}或{height:250}；speed:速度 1-100，默認為10	if(typeof(element)=='string')element=document.getElementById(element);	if(!element.effect){		element.effect = {};		element.effect.resize=0;	}	clearInterval(element.effect.resize);	var speed=speed||10;	var	start = {width:element.offsetWidth, height:element.offsetHeight};	var styleArr=[];	if(!(navigator.userAgent.toLowerCase().indexOf('msie') != -1&&document.compatMode == 'BackCompat')){		//除了ie下border-content式盒模型情況外，需要對size加以修正		var CStyle=document.defaultView?document.defaultView.getComputedStyle(element,null):element.currentStyle;		if(typeof(size.width)=='number'){			styleArr.push('width');			size.width=size.width-CStyle.paddingLeft.replace(//D/g,'')-CStyle.paddingRight.replace(//D/g,'');		}		if(typeof(size.height)=='number'){			styleArr.push('height');			size.height=size.height-CStyle.paddingTop.replace(//D/g,'')-CStyle.paddingBottom.replace(//D/g,'');		}	}	element.style.overflow = 'hidden';	var	style = element.style;	element.effect.resize = setInterval(function(){		for(var i=0;i<styleArr.length;i++){			start[styleArr[i]] += (size[styleArr[i]] - start[styleArr[i]]) * speed/100;			style[styleArr[i]] = start[styleArr[i]] + 'px';		}		for(var i=0;i<styleArr.length;i++){			if(Math.round(start[styleArr[i]]) == size[styleArr[i]]){				if(i!=styleArr.length-1)continue;			}else{				break;			}			for(var i=0;i<styleArr.length;i++)style[styleArr[i]] = size[styleArr[i]] + 'px';			clearInterval(element.effect.resize);			if(callback)callback.call(element);		}	}, 20);};</script></head><body><div   class="iwvjtn8m0"   id="testDiv" style="position:absolute; right:100px; top:50px; background-color:#abc; width:100px; height:50px;padding:10px;" onclick="alert(this.style.filter)"><div style="background-color:#369; height:100%;"></div></div><br/>    動畫測試  <input type="button" value="改變大小"onClick="resize('testDiv', {width:rand(60,600),height:rand(30,300)})" /><input type="button" value="改變寬度"onClick="resize('testDiv', {width:rand(60,600)})" /><input type="button" value="改變高度"onClick="resize('testDiv', {height:rand(30,300)})" />  <input type="button" value="移動位置"onClick="move('testDiv', {left:rand(40,600),top:rand(40,400)})" /><input type="button" value="水平移動"onClick="move('testDiv', {left:rand(40,600)})" /><input type="button" value="垂直移動"onClick="move('testDiv', {top:rand(40,400)})" />  <input type="button" value="透明度變化"onClick="fade('testDiv', rand(5,100))" />  <input type="button" value="還原"onClick="var ele=document.getElementById('testDiv');clearInterval(ele.effect.move);clearInterval(ele.effect.fade);clearInterval(ele.effect.resize);ele.style.cssText='position:absolute; right:100px; top:50px; background-color:#abc; width:100px; height:50px;padding:10px;'" /></body></html>

上一篇：一個挺漂亮的鼠標效果，帶跟隨效果

下一篇：被鼠標牽引而束縛的屏幕寵物