旋转打圈圈

html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>

<style type="text/css">
*{margin:0;padding:0;}
.container{position:relative;width:800px;height:500px; margin:0 auto;}
.box{position:absolute;width:50px;height:50px; font-size:16px;}
.dot{ position:absolute;width:20px;height:20px;background:#F00;}
.bg{background: url(img/backgrundimg.png) no-repeat; width: 773px;height: 634px;background-size: 674px 547px;margin-top:30px;position:relative;z-index:1000000;}
</style>
</head>
<body>
<div class="container">
        <img  class="bg" src="img/backgrundimg.png"> 
        <img  class="box"  src="img/1.png">
        <img  class="box"  src="img/2.png">     
        <img  class="box"  src="img/3.png">
        <img  class="box"  src="img/4.png">
        <img  class="box"  src="img/5.png">
        <img  class="box"  src="img/6.png">
        <img  class="box"  src="img/7.png">
        <img  class="box"  src="img/8.png">
        <img  class="box"  src="img/9.png">
        <img  class="box"  src="img/10.png">
        <img  class="box"  src="img/11.png">
        <img  class="box"  src="img/12.png">        
        <img  class="box"  src="img/13.png">
        <img  class="box"  src="img/14.png">
        <img  class="box"  src="img/15.png">    

</div>
</body>

</html>
<script src="vue.min.js"></script>
<script  src="aa.js"></script>

js：

    var $j= jQuery.noConflict(true);
    new Vue({
        el: '#app',
        data: {

        },
        methods: {
            aa:function(){  
        //中心点横坐标
        var dotLeft = ($j(".container").width()-$j(".dot").width())/1.6;
        //中心点纵坐标
        var dotTop = ($j(".container").height()-$j(".dot").height())/1.5;
        //起始角度
        var stard = 0;
        //半径
        var radius = 320;
        //每一个BOX对应的角度;
        var avd = 360/$j(".box").length;
        //每一个BOX对应的弧度;
        var ahd = avd*Math.PI/180;
        //运动的速度
        var speed = 2;      
        //运动函数
        //设置圆的中心点的位置
        $j(".dot").css({"left":dotLeft,"top":dotTop});
        //设置DIV圆形排列
        $j(".box").each(function(index, element){
            $j(this).css({"left":Math.sin((ahd*index))*radius+dotLeft,"top":Math.cos((ahd*index))*radius+dotTop});
        });

        //运动函数
        var fun_animat = function(){            
            speed = speed<360?speed:2;          
            //运运的速度
            speed+=2;
            //运动距离，即运动的弧度数;
            var ainhd = speed*Math.PI/180;          
            //按速度来定位DIV元素
            $j(".box").each(function(index, element){
                $j(this).css({"left":Math.sin((ahd*index+ainhd))*radius+dotLeft,"top":Math.cos((ahd*index+ainhd))*radius+dotTop});
                $j(this).mouseover(function(){
                    clearInterval(setAnimate);
                });
                $j(this).mouseout(function(){
                    clearInterval(setAnimate);
                    setAnimate=setInterval(fun_animat,100);
                });

            });

        }   

        //定时调用运动函数
         var setAnimate=setInterval(fun_animat,100);
          },
        },
        created:function(){
            this.aa();
        },
    });

猜你喜欢