js动画

<!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动画的更多相关文章

【06-23】js动画学习笔记01
<html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...
css动画与js动画的区别
CSS动画优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
CSS VS JS动画，哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
JS动画理论
动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...
css与 js动画优缺点比较
我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...
[学习笔记]js动画实现方法，作用域，闭包
一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...
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 首 ...
js动画（四）
终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...
css动画特效与js动画特效（一）------2017-03-24
1.用css做动画效果: 放鼠标才会发生利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...
JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

随机推荐

CNN车型分类总结
最近在做一个CNN车型分类的任务,首先先简要介绍一下这个任务. 总共30个类,训练集图片为车型图片,类似监控拍摄的车型图片,训练集测试集安6:4分,训练集有22302份数据,测试集有14893份数据. ...
创建table并实现ID自增长
① create table p_user( id number(10) not null primary key, name varchar2(3 ...
Android学习资料收集
1.Android 学习之路 http://stormzhang.com/android/2014/07/07/learn-android-from-rookie/
SDN/NFV运营商商业化部署
三大运营商发布未来网络架构,并逐步加快SDN/NFV商业化部署的步伐.中国联通发布其新一代网络架构<CUBE-Net 2.0白皮书>,并与20多家合作伙伴共同启动了“新一代网络”合作研发计 ...
触发bfd 的条件
满足下列条件之一就可触发BFC [1]根元素,即HTML元素 [2]float的值不为none [3]overflow的值不为visible [4]display的值为inline-block.tab ...
关于目录路径path
1.框架的目录结构 yii-1 .htaccess index.php protect -config -controllers -components 2.Linux 服务器 CentOs usr/ ...
CentOS7 睡眠休眠关机电源
设置装有 CentOS7 的笔记本合盖后黑屏进入睡眠模式 systemd 能够处理某些电源相关的 ACPI事件,你可以通过从 /etc/systemd/logind.conf 以下选项进行配置: Ha ...
@RequestMapping 用法详解之地址映射
@RequestMapping 用法详解之地址映射引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没 ...
IE8下导入EXCEL数据传到客户端以附件下载
IE8下导入EXCEL数据传到客户端以附件下载方式出现,而不显示数据,解决方法:以text/html格式返回. HttpResponseMessage message = new HttpRespon ...
百度地图api的覆盖物样式与bootstrap样式冲突解决办法
使用百度地图api 和 bootstrap ,发现标注样式出现了问题 label左侧宽度变得非常窄正常情况下应该是下面这样的: 原因是boostrap样式和百度地图样式冲突了. 解决办法: .ba ...

js动画

js动画的更多相关文章

随机推荐

热门专题