[前端]背景图,中间放大特效

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>

View Code

只有让自己变得优秀,才有资格对这个世界指手画脚。