<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ani</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
ul{
list-style: none; }
ul li{
height:200px;
width:200px;
border:4px solid #;
margin-bottom:20px;
background: yellow;
}
#list2{
filter: alpha(opacity:);
opacity: 0.3;
}
</style>
<script>
window.onload=function(){ //var list=document.getElementsByTagName("li");
var list0=document.getElementById("list0");
var list1=document.getElementById("list1");
var list2=document.getElementById("list2");
var list3=document.getElementById("list3");
var list4=document.getElementById("list4");
/*for(var i=0;i<list.length;i++){
list[i].timer=null;
list[i].=function(){
startmove(this,400); }
list[i].onmouseout=function(){
startmove(this,200);
}
} */
list0.onmouseover=function(){
startmove(this,"height",);}
list0.onmouseout=function(){
startmove(this,"height",);}
list1.onmouseover=function(){
startmove(this,"width",);}
list1.onmouseout=function(){
startmove(this,"width",);}
list2.onmouseover=function(){
startmove(this,"opacity",);}
list2.onmouseout=function(){
startmove(this,"opacity",);}
list3.onmouseover=function(){
startmove(list3,"height",,function(){
startmove(list3,"width",,function(){
startmove(list3,"opacity",);
});
});}
list3.onmouseout=function(){
startmove(list3,"opacity",,function(){
startmove(list3,"width",,function(){
startmove(list3,"height",);
});
});}
list4.onmouseover=function(){
startmove1(this,{height :,width :,opacity:});}
list4.onmouseout=function(){
startmove1(this,{height :,width :,opacity:});}
function startmove1(obj,json,fn){
var flag=true;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var i in json){
if(i=="opacity"){
var curr=Math.round(parseFloat(getStyle(obj,i))*);
alert(curr);
}
else{
var curr=parseInt(getStyle(obj,i));}
var speed=(json[i]-curr)/;
speed=speed>?Math.ceil(speed):Math.floor(speed);
if(curr!=json[i]){
flag=false;}
if(i=="opacity"){
obj.style.filter="alpha(opacity:"+(curr+speed)+")";
obj.style.opacity=(curr+speed)/;
}
else{
obj.style[i]=curr+speed+"px";} if(flag){
clearInterval(obj.timer);
}
if(fn){
fn(); }
}
},);
}
function startmove(obj,arr,iTarge,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(arr=="opacity"){
var curr=Math.round(parseFloat(getStyle(obj,arr))*);
alert(curr);
}
else{
var curr=parseInt(getStyle(obj,arr));}
var speed=(iTarge-curr)/;
speed=speed>?Math.ceil(speed):Math.floor(speed);
if(curr==iTarge){
clearInterval(obj.timer);
if(fn){
fn();
}
}
else{
if(arr=="opacity"){
obj.style.filter="alpha(opacity:"+(curr+speed)+")";
obj.style.opacity=(curr+speed)/;
}
else{
obj.style[arr]=curr+speed+"px";}
}
},);
}
function getStyle(obj,arr){
if(obj.currentStyle){
//alert(obj.currentStyle[arr]);
return obj.currentStyle[arr];
}
else{
return getComputedStyle(obj,false)[arr];
}
}
}
</script>
</head>
<body>
<div><ul>
<li id="list0"></li>
<li id="list1"></li>
<li id="list2"></li>
<li id="list3"></li>
<li id="list4"></li>
</ul></div>
</body>
</html>

五个li前三个都是只改变高、宽、透明度中的其中一个。第四个是链式动画,当鼠标移入的时候先改变高度再改变宽度,最后再改变透明度;当鼠标移出的时候反序恢复,先恢复透明度与,再恢复宽度最后恢复高度。最后一个li是同时运动,使得元素的高宽和透明度同时发生改变。为了实现同时改变引用了json。

json的格式是{a:b,c:d......}a和c代表元素,相当于object,b 和d代表数值,相当于iTarget。通过对json的for-in循环实现元素的同时运动。

json 的for-in循环的格式是for(var i in json){.....}其中i指的是 元素名,json[i]代表元素名对应的数值。

对于已经可以实现高宽运动的startmove函数,为了让元素通过startmove同时实现对透明度的改变需要对元素名进行判断,如果是opacity就特殊处理,否则正常处理。

对于元素的链式动画,需要对startmove的形参中多添加一个代表函数的形参。然后在清除定时器之前判断,如果有此实参传入就先清除定时器然后执行此函数。

对于元素的同时运动,将要同时执行的要求放入json中,然后通过for循环执行运动。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ani</title><style type="text/css">*{margin:0px;padding:0px;}ul{list-style: none;        }ul li{height:200px;width:200px;    border:4px solid #233;margin-bottom:20px;background: yellow;}#list2{filter: alpha(opacity:30);opacity: 0.3;}</style><script>window.onload=function(){//var list=document.getElementsByTagName("li");      var list0=document.getElementById("list0");      var list1=document.getElementById("list1");      var list2=document.getElementById("list2");      var list3=document.getElementById("list3");      var list4=document.getElementById("list4");/*for(var i=0;i<list.length;i++){ list[i].timer=null;list[i].=function(){startmove(this,400);}list[i].onmouseout=function(){startmove(this,200);}}*/    list0.onmouseover=function(){    startmove(this,"height",400);}    list0.onmouseout=function(){    startmove(this,"height",200);}    list1.onmouseover=function(){    startmove(this,"width",400);}    list1.onmouseout=function(){    startmove(this,"width",200);}    list2.onmouseover=function(){    startmove(this,"opacity",100);}    list2.onmouseout=function(){    startmove(this,"opacity",30);}    list3.onmouseover=function(){    startmove(list3,"height",400,function(){    startmove(list3,"width",400,function(){    startmove(list3,"opacity",30);    });    });}    list3.onmouseout=function(){    startmove(list3,"opacity",100,function(){    startmove(list3,"width",200,function(){    startmove(list3,"height",200);    });    });}    list4.onmouseover=function(){    startmove1(this,{height :400,width :400,opacity:30});}    list4.onmouseout=function(){    startmove1(this,{height :200,width :200,opacity:100});}function startmove1(obj,json,fn){var flag=true;     clearInterval(obj.timer);          obj.timer=setInterval(function(){     for(var i in json){     if(i=="opacity"){     var curr=Math.round(parseFloat(getStyle(obj,i))*100);     alert(curr);     }     else{     var curr=parseInt(getStyle(obj,i));}     var speed=(json[i]-curr)/8;     speed=speed>0?Math.ceil(speed):Math.floor(speed);     if(curr!=json[i]){     flag=false;}     if(i=="opacity"){     obj.style.filter="alpha(opacity:"+(curr+speed)+")";     obj.style.opacity=(curr+speed)/100;     }     else{            obj.style[i]=curr+speed+"px";}         if(flag){          clearInterval(obj.timer);        }        if(fn){         fn();         }}      },30);    }    function startmove(obj,arr,iTarge,fn){     clearInterval(obj.timer);          obj.timer=setInterval(function(){     if(arr=="opacity"){     var curr=Math.round(parseFloat(getStyle(obj,arr))*100);     alert(curr);     }     else{     var curr=parseInt(getStyle(obj,arr));}     var speed=(iTarge-curr)/8;     speed=speed>0?Math.ceil(speed):Math.floor(speed);     if(curr==iTarge){         clearInterval(obj.timer);         if(fn){         fn();         }     }     else{     if(arr=="opacity"){     obj.style.filter="alpha(opacity:"+(curr+speed)+")";     obj.style.opacity=(curr+speed)/100;     }     else{            obj.style[arr]=curr+speed+"px";} }     },30);    }    function getStyle(obj,arr){    if(obj.currentStyle){    //alert(obj.currentStyle[arr]);    return obj.currentStyle[arr];    }    else{    return getComputedStyle(obj,false)[arr];    }    }}</script></head><body><div><ul><li id="list0"></li><li id="list1"></li><li id="list2"></li><li id="list3"></li><li id="list4"></li></ul></div></body></html>

js动画的更多相关文章

  1. 【06-23】js动画学习笔记01

    <html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...

  2. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  3. CSS VS JS动画,哪个更快[译]

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

  4. JS动画理论

    动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...

  5. css与 js动画 优缺点比较

    我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...

  6. [学习笔记]js动画实现方法,作用域,闭包

    一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...

  7. css3动画与js动画的一些理解

    http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...

  8. js动画(四)

    终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...

  9. css动画特效与js动画特效(一)------2017-03-24

    1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...

  10. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

随机推荐

  1. php 路径的理解

      当php文件用require方式包含了另外一个文件,这另外文件引用的图片是相对目录下的内容时,而该相对目录是指包含目录的文件的 -----index.php -----default 目录 --- ...

  2. javascript实用技巧、javascript高级技巧

    字号+作者:H5之家 来源:H5之家 2016-10-31 11:00 我要评论( ) 三零网提供网络编程. JavaScript 的技术文章javascript实用技巧.javascript高级技巧 ...

  3. python 文件操作(转)

    python中对文件.文件夹(文件操作函数)的操作需要涉及到os模块和shutil模块. 得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd() 返回指定目录下的所有文件和目 ...

  4. spring data jpa分页

    controller层 @RequestMapping(value="/search") @ResponseBody public String search(HttpServle ...

  5. canvas九宫格跑马灯

    canvas九宫格跑马灯抽奖 之前用dom写了一版,部分 安卓机会卡顿,换用canvas dom版本九宫格抽奖

  6. javascript 性能惰性加载2016.12.13

    利用函数的惰性载入提高 javascript 代码性能 原文:利用函数的惰性载入提高javascript代码性能 作者:阿安 在 javascript 代码中,因为各浏览器之间的行为的差异,我们经常会 ...

  7. sql练习(mysql版)

    学生表student 老师表teacher 课程表course 分数表test 1.数学比语文成绩高的所有学生 select a.sid from () a, () b where a.sid=b.s ...

  8. html5--canvas绘制简单的时钟

    http://5227788.cn/static/time.html <!DOCTYPE html> <html lang="en"> <head&g ...

  9. ubuntu-docker-consul-swarm-shipyard-portainer

    --- env --- root@node1:~# cat /etc/issueUbuntu 12.04.4 LTS \n \l root@node1:~# docker -vDocker versi ...

  10. Coding List

    决定还是用回.net吧,一个人瞎搞比较快,在这里把进展做个简单的记录.