zoukankan      html  css  js  c++  java

  • js动画（主要学会如何使用定时器，理解代码的整体思路）

    速度动画：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>速度动画</title>
	<style type="text/css">
*{margin: 0px;padding: 0px}
#ob{200px;height: 200px;background-color:red;position:relative;left: -200px;}
#sh{50px;height:50px;background-color: green;position:absolute;left:200px;top:75px;}
	</style>
</head>
<body>
	<div id="ob"><span id="sh">分享</span></div>
	<script type="text/javascript">
window.onload=function(){
	var ob=document.getElementById('ob');
	var sh=document.getElementById('sh');
	//无参数
	/*ob.onmouseover=function(){
		startMove();
	}
   ob.onmouseout=function(){
		stopMove();
	}*/

	//有参数
	ob.onmouseover=function(){
		startMove(0,10);
	}
   ob.onmouseout=function(){
		stopMove(-200,10);
	}
}
//无参数
/*var timer=null;
function startMove(){
	var ob=document.getElementById('ob');
	clearInterval(timer);
    timer=setInterval(function(){
    	if(ob.offsetLeft==0){
    		clearInterval(timer);
    	}else{
    		ob.style.left=ob.offsetLeft+10+'px';
    	}
    	
    },30);
}

function stopMove(){
	var ob=document.getElementById('ob');
	clearInterval(timer);
    timer=setInterval(function(){
    	if(ob.offsetLeft==-200){
    		clearInterval(timer);
    	}else{
    		ob.style.left=ob.offsetLeft-10+'px';
    	}
    	
    },30);
}*/

//有参数
var timer=null;
function startMove(tar,spe){
	var ob=document.getElementById('ob');
	clearInterval(timer);
    timer=setInterval(function(){
    	if(ob.offsetLeft==tar){
    		clearInterval(timer);
    	}else{
    		ob.style.left=ob.offsetLeft+spe+'px';
    	}
    	
    },30);
}

function stopMove(tar,spe){
	var ob=document.getElementById('ob');
	clearInterval(timer);
    timer=setInterval(function(){
    	if(ob.offsetLeft==tar){
    		clearInterval(timer);
    	}else{
    		ob.style.left=ob.offsetLeft-spe+'px';
    	}
    	
    },30);
}

	</script>

</body>
</html>

    　　透明度动画：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>透明度动画</title>
<style type="text/css">
	*{margin: 0px;padding: 0px;}
	#div1{ 200px;height: 200px;background-color: red;filter:alpha(opacity:30);opacity: 0.3;}
</style>
</head>
<body>
	<div id="div1">
	</div>
	<script type="text/javascript">
window.onload=function(){
	var div1=document.getElementById('div1');
	div1.onmouseover=function(){
		startMove(100);
	}
    div1.onmouseout=function(){
		Move(30);
	}
}
var timer=null;
var alpha=30;
function startMove(tar){
	var div1=document.getElementById('div1');
	clearInterval(timer);
    timer=setInterval(function(){
    	if (alpha==tar) {
    		clearInterval(timer);
    	}else{
    		alpha+=10;
    		div1.style.filter='alpha(opacity:'+alpha+')';
    		div1.style.opacity=alpha/100;
    	}
    	 	
    },30);   	
}
function Move(tar){
	var div1=document.getElementById('div1');
	clearInterval(timer);
    timer=setInterval(function(){
    	if (alpha==tar) {
    		clearInterval(timer);
    	}else{
    		alpha-=10;
    		div1.style.filter='alpha(opacity:'+alpha+')';
    		div1.style.opacity=alpha/100;
    	}
    	 	
    },30);   	
}


	</script>
</body>
</html>

    　缓冲动画：在速度动画的基础上做了一些改变，加了缓冲效果，唯一要注意的就是对速度的取整问题，不懂得可以用开发工具调试一下，观察left数据的变化

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>速度动画</title>
	<style type="text/css">
*{margin: 0px;padding: 0px}
#ob{200px;height: 200px;background-color:red;position:relative;left: -200px;}
#sh{50px;height:50px;background-color: green;position:absolute;left:200px;top:75px;}
	</style>
</head>
<body>
	<div id="ob"><span id="sh">分享</span></div>
	<script type="text/javascript">
window.onload=function(){
	var ob=document.getElementById('ob');
	var sh=document.getElementById('sh');
	ob.onmouseover=function(){
		startMove(0);
	}
   ob.onmouseout=function(){
		startMove(-200);
	}
}

var timer=null;
function startMove(tar){
	var ob=document.getElementById('ob');
	clearInterval(timer);
    timer=setInterval(function(){
    	var speed=(tar-ob.offsetLeft)/30;
    	//必须要向上或向下取整，不然会出错
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
    	if(ob.offsetLeft==tar){
    		clearInterval(timer);
    	}else{
    		ob.style.left=ob.offsetLeft+speed+'px';
    	}
    	
    },30);
}

	</script>

</body>
</html>

    　　多物体速度动画：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多物体动画2</title>
	<style type="text/css">
	ul{list-style: none;}
ul li{ 200px;height: 100px;background-color: blue;margin-top: 20px;}
	</style>
</head>
<body>
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<script type="text/javascript">
window.onload=function(){
	var oli=document.getElementsByTagName('li');
	for(var i=0;i<oli.length;i++){
		oli[i].timer=null;
		oli[i].onmouseover=function(){
			starMove(this,400);
		}
		oli[i].onmouseout=function(){
			starMove(this,200);
		}
	}
}

function starMove(obj,tar){
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		var speed=(tar-obj.offsetWidth)/8;
    	//必须要向上或向下取整，不然会出错
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
		if(obj.offsetWidth==tar){
			clearInterval(obj.timer);
		}else{
			obj.style.width=obj.offsetWidth+speed+'px';
		}
	},30);
}
	</script>
</body>
</html>

    　　多物体透明度动画：

        <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>多物体动画</title>
    <style type="text/css">
    div{ 200px;height: 200px;float: left;background-color: green;margin-left: 10px;filter:alpha(opacity:30);opacity: 0.3;}
    </style>

    </head>
    <body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <script type="text/javascript">
    window.onload=function(){
    var ob=document.getElementsByTagName('div');
    for(var i=0;i<ob.length;i++){
        ob[i].alpha=30;
     ob[i].onmouseover=function(){
        starMove(this,100);
    }
     ob[i].onmouseout=function(){
        starMove(this,30);
    }
    }
    }

    function starMove(obj,tar){
          clearInterval(obj.timer);
          obj.timer=setInterval(function(){
            var speed=0;
        if(obj.alpha<tar){
            speed=10;
        }else{
            speed=-10;
        }
            if (obj.alpha==tar) {
                clearInterval(obj.timer);
            }else{
                obj.alpha+=speed;
                obj.style.filter='alpha(opacity:'+obj.alpha+')';
                obj.style.opacity=obj.alpha/100;
            }
          },30);

    }
    </script>


    </body>
    </html>

    　　获取样式：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多物体动画2</title>
    <style type="text/css">
    ul{list-style: none;}
ul li{ 200px;height: 100px;background-color: blue;margin-top: 20px;border:2px solid red;}
    </style>
</head>
<body>
    <ul>
        <li id="li1"></li>
        <li id="li2"></li>
        
    </ul>
    <script type="text/javascript">
window.onload=function(){
    var li1=document.getElementById('li1');
    var li2=document.getElementById('li2');
    li1.onmouseover=function(){
            starMove(this,400,'width');
        }
        li1.onmouseout=function(){
            starMove(this,200,'width');
        }
        li2.onmouseover=function(){
            starMove(this,400,'height');
        }
        li2.onmouseout=function(){
            starMove(this,100,'height');
        }
}

function starMove(obj,tar,oh){
    
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var icur=parseInt(getStyle(obj,oh));
    
        var speed=(tar-icur)/8;
        //必须要向上或向下取整，不然会出错
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        if(icur==tar){
            clearInterval(obj.timer);
        }else{
            obj.style[oh]=icur+speed+'px';
        }
    },30);
}


function getStyle(obj,att){
    if(obj.currentStyle){
        return obj.currentStyle[att];
    }else{
        return getComputedStyle(obj,false)[att];
    }

}



    </script>
</body>
</html>

     任意属性值：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多物体动画任意属性值</title>
	<style type="text/css">
	ul{list-style: none;}
ul li{ 200px;height: 100px;background-color: blue;margin-top: 20px;border:2px solid red;filter:alpha(opcity:30);opacity: 0.3;}
	</style>
</head>
<body>
	<ul>
		<li id="li1"></li>
		
		
	</ul>
	<script type="text/javascript">
window.onload=function(){
	var li1=document.getElementById('li1');
	
	li1.onmouseover=function(){
			starMove(this,100,'opacity');
		}
		li1.onmouseout=function(){
			starMove(this,30,'opacity');
		}
}
var alpha=30;
function starMove(obj,tar,oh){
	
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		var icur=0;
		if(oh=='opacity'){
			icur=Math.round(parseFloat(getStyle(obj,oh))*100);
		}else{
			icur=parseInt(getStyle(obj,oh));
		}	
		var speed=(tar-icur)/8;
    	//必须要向上或向下取整，不然会出错
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
		if(icur==tar){
			clearInterval(obj.timer);
		}else{
			if(oh=='opacity'){
				obj.style.filter='alpha(opacity:'+(icur+speed)+')';
				obj.style.opacity=(icur+speed)/100;
			}else{
				obj.style[oh]=icur+speed+'px';
			}
			
		}
	},30);
}


function getStyle(obj,att){
	if(obj.currentStyle){
		return obj.currentStyle[att];
	}else{
		return getComputedStyle(obj,false)[att];
	}

}



	</script>
</body>
</html>

    　　链式动画：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>链式动画</title>
	<style type="text/css">
	ul{list-style: none;}
ul li{ 200px;height: 100px;background-color: blue;margin-top: 20px;border:2px solid red;filter:alpha(opcity:30);opacity: 0.3;}
	</style>
</head>
<body>
	<ul>
		<li id="li1"></li>	
	</ul>
	<script type="text/javascript">
window.onload=function(){
	var li1=document.getElementById('li1');
	
	li1.onmouseover=function(){
			starMove(li1,400,'width',function(){
				starMove(li1,400,'height',function(){
					starMove(li1,100,'opacity');
				});
			});
		}
		li1.onmouseout=function(){
			starMove(li1,30,'opacity',function(){
				starMove(li1,100,'height',function(){
					starMove(li1,200,'width');
				});
			});
		}
}




var alpha=30;
function starMove(obj,tar,oh,fn){
	
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		var icur=0;
		if(oh=='opacity'){
			icur=Math.round(parseFloat(getStyle(obj,oh))*100);
		}else{
			icur=parseInt(getStyle(obj,oh));
		}	
		var speed=(tar-icur)/8;
    	//必须要向上或向下取整，不然会出错
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
		if(icur==tar){
			clearInterval(obj.timer);
			if(fn){
				fn();
			}
		}else{
			if(oh=='opacity'){
				obj.style.filter='alpha(opacity:'+(icur+speed)+')';
				obj.style.opacity=(icur+speed)/100;
			}else{
				obj.style[oh]=icur+speed+'px';
			}
			
		}
	},30);
}


function getStyle(obj,att){
	if(obj.currentStyle){
		return obj.currentStyle[att];
	}else{
		return getComputedStyle(obj,false)[att];
	}

}



	</script>
</body>
</html>

    　　同时运动（json）：var json={name:key};  

          eg:var json={a:100,b:20};

               for(var i in json){

               alert(json[i]);

    }

    	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>同时运动</title>
	<style type="text/css">
	ul{list-style: none;}
	ul li{ 200px;height: 100px;background-color: blue;margin-top: 20px;border:2px solid red;filter:alpha(opcity:30);opacity: 0.3;}
	</style>
	</head>
	<body>
	<ul>
		<li id="li1"></li>	
	</ul>
	<script type="text/javascript">
	window.onload=function(){
	var li1=document.getElementById('li1');

	li1.onmouseover=function(){
			starMove(li1,{291,height:200,opacity:100});
		}
		li1.onmouseout=function(){
			starMove(li1,{200,height:100,opacity:30});
		}
	}

	var alpha=30;
	function starMove(obj,json,fn){
	var flag=true;
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		for(var oh in json){

		var icur=0;
		if(oh=='opacity'){
			icur=Math.round(parseFloat(getStyle(obj,oh))*100);
		}else{
			icur=parseInt(getStyle(obj,oh));
		}	

		var speed=(json[oh]-icur)/8;
		//必须要向上或向下取整，不然会出错
	    speed=speed>0?Math.ceil(speed):Math.floor(speed);

		if(icur!=json[oh]){
			flag=false;		
			}
			if(oh=='opacity'){
				obj.style.filter='alpha(opacity:'+(icur+speed)+')';
				obj.style.opacity=(icur+speed)/100;
			}else{
				obj.style[oh]=icur+speed+'px';
			}
			if (flag==true) {
				clearInterval(obj.timer);
				if (fn) {
					fn();
				}
			}		
		}

	},30);
	}


	function getStyle(obj,att){
	if(obj.currentStyle){
		return obj.currentStyle[att];
	}else{
		return getComputedStyle(obj,false)[att];
	}

	}

	</script>
	</body>
	</html>

    　　
  • 相关阅读:
    承载进程 (vshost.exe)
    命令行生成解决方案
    【SQL Server】存储过程的设计概念（3）TSQL的编译和执行过程
    .NET Framework 4
    reflector最新说明
    应用程序域
    vi 编辑器的用法(2013最新整理)
    linux中查看日志的方法
    修改linux主机名的方法介绍
    如何获得桌面上任意一个位置的颜色的 rgb 或者16进制值了
  • 原文地址：https://www.cnblogs.com/td-tkzc/p/5792412.html
Copyright © 2011-2022 走看看