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学习：第一周——NO.3面向对象
[面向对象基础知识] 封装:对于功能相同的代码,我们只需封装一次,以后再遇到类似的功能,只需调用即可,无需重写,避免大量冗余代码. 对象的特征:方法和属性: 面向对象的特点: 封装:低耦合高内聚: 继 ...
C# WinForm实现Windows 7 Aero磨砂玻璃效果
在Vista系统之后,微软为窗体程序提供了Aero磨砂的效果,如下图.那么用C#如何来实现这种磨砂效果呢? 代码: using System; using System.Collections.Ge ...
Bootstrap表单验证插件bootstrapValidator使用方法整理
插件介绍先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...
Sublime3和Chrome配置自动刷新网页【实测可用】
SublimeText2下的LiveReload在SublimeText3下无法正常使用,本文整理SublimeText3安装LiveReload的方法.win7下实测可用! 安装成功后,就不需要再手 ...
【ASP.NET】VS编译成功后自动生成Nuget包
在VisualStudio项目中,可以在每次编译成功后自动发布nuget包,具体配置过程如下: 1.下载nuget.exe,放置在Visual Studio项目的根目录下. 2.通过命令行生成 ...
463. Island Perimeter
https://leetcode.com/problems/island-perimeter/ 在一个N×N的矩阵中,N<100,1代表岛,0代表海,岛内没有海,求岛的周长 [[0,1,0,0] ...
简单的sql server连接
private string constring="data source=112.74.73.122;initial catalog=qzyData;user id=sa;password ...
JS中定义对象原型的两种使用方法
第一种: function Person() { this.username = new Array(); this.password = "123"; } Person.prot ...
javase-->基础知识（一）
1.JDK安装和和配置 1)安装jdk1.8版本(不同的平台安装不同的jdk). 2)配置:将.../jdk1.x/bin放到path环境变量的最前面(避免之前配的环境变量干扰). ****** ja ...
Hadoop HA高可用性架构和演进分析（转）
1.概况截至目前,Apache Hadoop版本分为两代,我们将第一代Hadoop称为Hadoop 1.0,第二代Hadoop称为Hadoop 2.0.前者主要有如下几种实现方式:1)社区版本基于S ...

js动画

js动画的更多相关文章

随机推荐

热门专题