1.看效果
<!doctype html> <html > <head> <meta charset="UTF-8"> <title>Document</title> <style> .bg{width:550px;height:550px;margin:0 auto;vertical-align:center;border-top:1px solid transparent} #cricle{border-radius:50%;margin:50% auto 0;background:#fff;width:10px;height:10px; background:url(151854.jpg) no-repeat;background-size:100%} </style> </head> <body> <div class="bg"> <div id="cricle"></div> </div> </body> <script> var show={ DISTANCE:500,//总距离 DURATION:1000,//总时间 STEPS:200,//总步数 step:0,//步长 interval:0,//每步时间间隔 timer:null,//保存定时器序号 moved:0,//保存已经移动的步数 div:null,//保存广告div init:function(){ this.div=document.getElementById("cricle"); //计算interval: DURATION/STEPS this.interval=this.DURATION/this.STEPS; //计算step:DISTANCE/STEPS this.step=this.DISTANCE/this.STEPS; this.run(); }, run:function(){ this.timer=setInterval( this.moveStep.bind(this),this.interval ); }, moveStep:function(){ var width=parseFloat( getComputedStyle(this.div).width ); var marginTop=parseFloat( getComputedStyle(this.div).marginTop ); this.div.style.width=width+this.step+"px"; this.div.style.height=width+this.step+"px"; this.div.style.marginTop=marginTop-this.step/2+"px"; this.moved++;//moved+1 //如果moved等于STEPS if(this.moved==this.STEPS){ //停止定时器,timer置为null,moved归零 clearInterval(this.timer); this.timer=null; this.moved=0; } } } show.init(); </script> </html>
实际上没必要做这么复杂,不过套用这个计时器模板,可以很方便的做出其他的动画效果.
贴个精简版本的.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #cricle { border-radius: 50%; background: #D58512; width: 200px; height: 200px; margin-left: auto; margin-right: auto; margin-top: 200px; } </style> </head> <body> <div id="cricle"></div> </body> <script type="text/javascript"> function $(id){ return document.querySelector(id); } function start() { var loop = setInterval(function() { $('#cricle').style.width=parseInt(getComputedStyle($('#cricle')).width)+ 10+"px"; $('#cricle').style.height=parseInt(getComputedStyle($('#cricle')).height) + 10+"px"; if(parseInt(getComputedStyle($('#cricle')).width) > 400) window.clearInterval(loop); }, 15); } start(); </script> </html>