HTML+JavaScript实现链式运动特效

Posted 2020-09-14 cxchanpin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML+JavaScript实现链式运动特效相关的知识，希望对你有一定的参考价值。

在学习js的过程中，发现这家伙做特效真是不错，尽管说眼下水平还不够，只是也能写点简单的效果。

今天分享一个简单的运动框架。然后利用这个框架实现简单的链式运动特效。

1.move.js

在运动框架中。主要进行长宽变化和透明度的变化。长宽的变化能够实现DIV的体积运动变化效果。透明度的话主要是在鼠标移入移出事件中加入淡入淡出的效果。我将这个简单的运动框架封装到一个单独的js文件里，方便调用。

先看看代码：

<span style="font-family:KaiTi_GB2312;">//用于获取非行间样式</span>
function getStyle(obj,name){
	
	if(obj.currentStyle){
		return obj.currentStyle[name];
	}else{
		return getComputedStyle(obj,false)[name];
	}
}
<span style="font-family:KaiTi_GB2312;">//四个參数分别为对象，属性，改动值，函数</span>
function startMove(obj,attr,iTarget,func){
	clearInterval(obj.timer);
	
	obj.timer=setInterval(function(){
		var cur=0;
		<span style="font-family:KaiTi_GB2312;">//推断要变化的属性是否为透明度</span>
		if(attr==‘opacity‘){
			cur=parseFloat(getStyle(obj,attr)*100);
		}else{
			cur=parseInt(getStyle(obj,attr));
		}
		
		//<span style="font-family:KaiTi_GB2312;">运动速度计算</span>
		var speed=(iTarget-cur)/6;
		speed=speed>0?
Math.ceil(speed):Math.floor(speed);
		
		if(cur==iTarget){
			clearInterval(obj.timer);
                        
<span style="font-family:KaiTi_GB2312;">                             //若存在函数參数。则运行函数</span>
			if(f<span style="font-family:KaiTi_GB2312;">unc</span>){
			<span style="font-family:KaiTi_GB2312;">         </span>f<span style="font-family:KaiTi_GB2312;">unc</span>();
			}
 		}else{
 			if(attr==‘opacity‘){
				<span style="font-family:KaiTi_GB2312;">//保证IE和FF的兼容性</span>
<span style="font-family:KaiTi_GB2312;">                                      </span>obj.style.filter=‘alpha(opacity:‘+(cur+speed)+‘)‘;
				obj.style.opacity=(cur+speed)/100;
			}else{
				obj.style[attr]=cur+speed+‘px‘;
			}
			
		}

	},30);
}

2.index.html

<html>
<head>
<meta charset="utf-8">
<style>
#div1{
	width:100px;
	height:100px;
	background:red;
	filter:alpha(opacity:30);opacity:0.3;
}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
	var oDiv=document.getElementById(‘div1‘);

	oDiv.onmouseover=function (){
		startMove(oDiv,‘width‘,300,function(){
			startMove(oDiv,‘height‘,300,function(){
				startMove(oDiv,‘opacity‘,100);
			});
		});
	};

	 oDiv.onmouseout=function (){
		startMove(oDiv,‘opacity‘,30,function(){
			startMove(oDiv,‘height‘,100,function(){
				startMove(oDiv,‘width‘,100);
			});
		});
	};
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

在mouseover中：先将DIV进行width变化，等运动结束。

然后进行height变化，最后进行opacity变化。

在mouseout中：先进行opacity变化，然后是height变化，最后进行width变化。就是和移入事件运动顺序全然相反。（此实例并无直接应用意义，可是对运动框架进行一些完好之后就能够做一些常见的特效了）

在startMove()的使用过程中。有类似与递归调用的感觉。只是这个好理解多了。