js动画

首页 > 代码库 > js动画

2024-08-24 08:21:15 222人阅读

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

五个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动画

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > js动画

js动画

看完仍有疑问？有类似问题直接问程序猿