打圈圈

原创 2018年04月15日 21:03:45
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();
        },
    });

字串打圈圈

1003: 狱吏问题 Time Limit: 1 Sec Memory Limit: 128 MB 64bit IO Format: %lld Submitted: 326 Accepte...
  • Davenny
  • Davenny
  • 2016-02-19 18:19:52
  • 150

圈圈网视 安装软件 非常好

  • 2011年03月28日 12:27
  • 9.93MB
  • 下载

圈圈教你玩USB(第二版)

  • 2016年05月25日 11:17
  • 59.53MB
  • 下载

圈圈教你玩USB(第二版).pdf

  • 2015年03月28日 09:42
  • 61.08MB
  • 下载

圈圈教你玩usb第一版硬件实物使用说明

原版书籍配置原版开发板一块 程序烧录好后,这个红色就相当于一个usb设备。 程序开发过程中,还需要烧录和调试,芯片用的是STC89C52RC,可以直接通过串口来烧录,串口烧录工具可...
  • parasoft
  • parasoft
  • 2016-12-21 10:27:38
  • 1295

《圈圈教你玩USB》 第三章 USB鼠标的实现——看书笔记( 2 )

《圈圈教你玩USB》 第三章 USB鼠标的实现——( 2 )
  • sz189981
  • sz189981
  • 2017-03-22 22:58:19
  • 566

《圈圈教你玩USB》之 USB鼠标

******************************************************************** ******             《圈圈教你玩USB》之...
  • autumn20080101
  • autumn20080101
  • 2013-05-21 15:42:45
  • 827

电脑圈圈总结的 USB全套USB学习资料

  • 2010年11月24日 11:06
  • 8.81MB
  • 下载

圈圈教你玩USB(第二版).pdf

  • 2016年02月26日 16:16
  • 58.03MB
  • 下载

圈圈教你玩USB(第二版)pdf

  • 2015年11月18日 14:49
  • 59.49MB
  • 下载
收藏助手
不良信息举报
您举报文章:打圈圈
举报原因:
原因补充:

(最多只允许输入30个字)