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 ...

随机推荐

js replaceAll
js 全部替换: /** * 替换(所有) * @param str 要处理的字符串 * @param beRepStr 被替换的字符串 * @param toRepStr 最终生成的字符串 * @r ...
overload、overwrite、override
1.重载 overload 函数名一样,参数不同(类型.顺序,与返回值类型无关),重载的函数一般在同一个类中 class A { public: void test() {} void test(in ...
mysql使用load导入txt文件所遇到的问题及解决方法
导入txt文件,有导入向导这种方式: 另外可以使用load的方式导入.最开始使用以下代码插入: load data local infile 'F:\\Data\\predict_data.txt' ...
Js计算当前日，当前周开始结束时间，当前月份，当前年份
<script type="text/javascript"> //日期加上天数后的新日期. function GetDateStr(AddDayCount) { va ...
python3 黑板客爬虫闯关游戏（三）
第三关,先登录,再猜密码,这关难度较第二关大幅增加,要先去注册一个登录账号,然后打开F12,多登录几次,观察headers数据的变化给出代码,里面注释很详细 import urllib.reques ...
html5——canva 绘图1简单图形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
解决ssh localhost中root@localhost:要求输入密码问题（已经进行了无密码设置登录）
首先删除~/.ssh目录下的3个文件,如下 id_rsa authorized_keys id_rsa.pub 然后 exit # 退出刚才的 ssh localhostcd ~/.ssh/ # 若没 ...
ADT for Eclipse无法升级到23.0的解决方法（确保您的网络能够访问google的地址）
进行以下步骤时,请确保您的网络能够访问google的地址,因为有可能是无法访问google地址导致无法升级,该文不是为了解决这个问题!!! 最近一次的升级,ADT无法从ADT 22.X升级到23.0. ...
应用商店后台MIS的一些思考
1.有些签名验证的工作应该在开发者上传APP的时候进行校验: 1)如果是更新新版本(包名packagename一致),那么需要验证两个APK的包的签名是否一致,不一致的,应该限制上传,除非先下架旧的A ...
mysql 命令导入导出
导出 mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysqldump -u root -p dataname >xxx.sql 导入 mysql>source ...

js动画

js动画的更多相关文章

随机推荐

热门专题