三个动画函数，透明度渐变、位置移动、尺寸变化

时间：2022-07-02 14:39:57 编辑：袖梨来源：一聚教程网

YPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.**w*3.org/TR/html4/loose.dtd">

提示：您可以先修改部分代码再运行

}
	}, 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.')-CStyle.paddingRight.replace(/D/g,'');
		}
		if(typeof(size.height)=='number'){
			styleArr.push('height');
			size.')-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>

<div id="testDiv" style="position:absolute; right:100px; top:50px; background-color:#abc;  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.<a href=" http: target="_blank">cssText='position:absolute; right:100px; top:50px; background-color:#abc;  padding:10px;'" />

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

三个动画函数，透明度渐变、位置移动、尺寸变化

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程