HTML+JavaScript实现链式运动特效

页面导航:首页 > 网络编程 > JavaScript > HTML+JavaScript实现链式运动特效

HTML+JavaScript实现链式运动特效

来源: 作者: 时间:2016-02-19 09:19 【

在学习js的过程中,发现这家伙做特效真是不错,虽然说目前水平还不够,不过也能写点简单的效果。今天分享一个简单的运动框架,然后利用这个框架实现简单的链式运动特效。1 mov

在学习js的过程中,发现这家伙做特效真是不错,虽然说目前水平还不够,不过也能写点简单的效果。今天分享一个简单的运动框架,然后利用这个框架实现简单的链式运动特效。

1.move.js

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

先看看代码:

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

	},30);
}

2.index.





<script src="move.js"></script>
<script>
window.onload=function(){
	var oDiv=document.getElementById('div1');

	oDiv.onmouver=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>



在mouseover中:先将DIV进行width变化,等运动结束。然后进行height变化,最后进行opacity变化。

在mouseout中:先进行opacity变化,然后是height变化,最后进行width变化。就是和移入事件运动顺序完全相反。(此实例并无直接应用意义,但是对运动框架进行一些完善之后就可以做一些常见的特效了)

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

3.小结

虽然说运动框架只有几十行的代码,但是其中的细节还是很多的。如果有用到这个框架的同学,在使用的时候先好好整理代码的逻辑,要不然出了bug,也真够虐心的。还好,我把注释写的很清楚了,希望能帮助到有需要的人。

上两张运动前后的图:

\

(忽略水印)

具体运动过程还是自己实践一番为好,再稍作修饰的话,效果肯定倍加。

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<