js动画实例

<!--<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css">
</style>
</head>
<body>
<div style="position:absolute;left:0;top:0;width:50px;height:50px;background-color:blue;"></div>
<script type="text/javascript">
    var div=document.getElementsByTagName(‘div‘)[0];
    var disX,
        disY;
        div.onmousedown=function(e){
            disX=e.pageX-parseInt(div.style.left);
            disY=e.pageY-parseInt(div.style.top);
            document.onmousemove=function(e){
                var event=e||window.event;
                div.style.left=e.pageX-disX+"px";
                div.style.top=e.pageY-disY+"px";
            }
            document.onmouseup=function(){
                div.onmousemove=null;
            }
        }
</script>
</body>
</html>-->
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<style>
  *{
      margin:0px;
      padding:0px;
  }
  div{
      width:100px;
      height:100px;
      background-color:black;
      left:0;
      top:0;
      position:absolute;
      opacity:1;
  }
</style>
<body>
<div></div>
<script>
var div=document.querySelector(‘div‘);
animate(div,{
    width:200,
    left:500,
    opacity:20
});
 function animate(el,properties){
     clearInterval(el.timerId);
     el.timerId=setInterval(function(){
         for(var property in properties){
             var current;
             var target=properties[property];
             if(property===‘opacity‘){
                 current=Math.round(parseFloat(getstyle(el,‘opacity‘))*100);
             }else{
                 current=parseInt(getstyle(el,property));
             }
         var speed=(target-current)/30;
         speed=speed>0?Math.ceil(speed):Math.floor(speed);
           if(property===‘opacity‘){
               el.style.opacity=(current+speed)/100;
           }else{
           el.style[property]=current+speed+‘px‘;
           }
     }
     },20)
 }
 function getstyle(el,property){
      if(getComputedStyle){
          return getComputedStyle(el)[property]
      }else{
          return el.currentStyle[property];
      }
  }
</script>
</body>
</html>

 

js动画实例

上一篇:Web前端面试问题以及开发常见问题


下一篇:git删除仓库的某个文件