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

随机推荐

SpringMvc核心流程以及入门案例的搭建
1.什么是SpringMvc Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应用程序的全功能 M ...
【Android接百度地图API】百度地图Demo点击按钮闪退
运行百度地图自带的BaiduMap_AndroidSDK_v4.1.0_Sample里面的BaiduMapsApiASDemo发现点击上面的按钮会闪退,控制台报的是xml的问题查了一下,官方文档特别 ...
C和指针第十五章文件I/O
stdio.h中包含了声明FILE结构 struct _iobuf { char *_ptr; //文件输入的下一个位置 int _cnt; //当前缓冲区的相对位置 char *_base; //指 ...
android-获得".apk"文件的相关信息。包名、版本号等等
String filePath = "/sdcard/feijiedemo.apk"; PackageManager packageManager = getPackageMana ...
word20161222
T.120 tag / 标记 TAPI, Telephony API / 电话 API target journaling / 目标日志 taskbar / 任务栏 taskbar button / ...
在Qt Creator 和在 vs2012 里添加信号和槽
原文地址:http://www.cnblogs.com/li-peng/p/3644812.html 作者:李鹏出处:http://www.cnblogs.com/li-peng/ 本文版权归作者和 ...
Cosmos —— Big Data at Microsoft
1, 1,cosmos stores. Cosmos stores data as streams – a file-like structure Streams are split apart in ...
DCIntrospect -iOS界面调试
原文:http://www.cnblogs.com/kw-ios/p/3523525.html 有时,设计稿上的UI很漂亮,布局也整齐,但自己用代码写出来的就不行,不是这里高一点,就是那是低一点,使用 ...
append 添加的元素重新绑定事件
在jQuery当中append是动态向页面中添加元素的常见方法,但是很多时候append添加之后的节点再次绑定事件(比如click)的时候,就会发现click失效,这时候就会涉及到,on() 高版本的 ...
TFS API：二、TFS 代码查询工作项
TFS API:二.TFS 代码查询工作项首先我们需要认识TFS的两大获取服务对象的类. 他们分别为TfsConfigurationServer和TfsTeamProjectCollection, ...

js动画

js动画的更多相关文章

随机推荐

热门专题