js动画（主要学会如何使用定时器，理解代码的整体思路）
速度动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>速度动画</title>
<style type="text/css">
*{margin: 0px;padding: 0px}
#ob{width:200px;height: 200px;background-color:red;position:relative;left: -200px;}
#sh{width: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{width: 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{width:200px;height: 200px;background-color:red;position:relative;left: -200px;}
#sh{width: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{width: 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{width: 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{width: 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{width: 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{width: 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{width: 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,{width:291,height:200,opacity:100});
}
li1.onmouseout=function(){
starMove(li1,{width: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>
没有天生的信心，只有不断培养的信心
浙公网安备 33010602011771号