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

随机推荐

ObjC运行时部分概念解析(一)
转型iOS已经许久了,Runtime(运行时)还没有好好了解过.之前没有阅读过源码,紧紧凭借自己的臆测.现在阅读下源码,做一些笔记.方便再次翻阅 SEL SEL是一个关键字,如果没有涉及runtime ...
C和指针第十六章标准函数库信号
信号名<signal.h> 程序中大多数错误都是程序本身导致的,但是,有些程序遇到的事件却不是程序本身所引发的.比如用户终止程序,程序无法预知此类事件发生的情况,信号就是为了对此类事件做出 ...
CentOS 7 环境配置
1. 代理设置 http://blog.csdn.net/fwj380891124/article/details/42168683 2. xfce 桌面安装 http://blog.csdn.net ...
Unity NGUI添加UIRoot
导入NGUI包后,菜单多出一个选项 "NGUI",选择其子选项 "options" -- "Reset Prefab ToolBar" ,在 ...
php关于ob_start('ob_gzhandler')启用GZIP压缩的bug
如果使用ob_start("ob_gzhandler"); 则ob_clean()后面的输出将不显示,这是个bug,可以用ob_end_clean();ob_start(" ...
MyBatis:统计数量
dao: /** * 统计商家的案例数量 * * @param shopId * @return */ long countByShopId(Long shopId); @Override publi ...
采用MVC模式JDBC演示案例
MVC三层架构: Model 模型层,数据处理和业务逻辑 View 视图层,为客户展示内容 Control 控制层,协调控制,更新模型案例如下: 1.获得数据库连接 package com.db; ...
Unity3D配合AndroidStudio打包
SET UNITY_PATH="C:\Program Files\Unity\Editor\Unity.exe" echo UNITY_PATH=%UNITY_PATH% SET ...
UIButton无法响应点击事件
一.问题描述因为项目需要,需要UITableView上添加固定的筛选表头,一直固定,不能随UITableView滚动.所以直接将表头与UITableView分离,将它添加到控制器的UIView上,即 ...
文件描述符、文件表项指针、inode节点的关系
内核使用3种数据结构表示打开的文件,他们之间的关系决定了在文件共享方面一个进程对另一个进程的影响. (1) 每个进程在进程表中都有一个纪录项,纪录项中包含一张打开文件描述符表,每个文件描述符各占一项, ...

js动画

js动画的更多相关文章

随机推荐

热门专题