一、使用JS实现圆周运动

根据指定圆心、半径，在定时器中移动固定的弧度，重绘圆圈的位置

源代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    .circle{

        width:20px;

        height:20px;

        background:blue;

        border-radius:50%;

        position: absolute;

    }

    .rectangle{

        width:300px;

        height:300px;

        border:1px solid red;

        position: relative;

    }

    </style>

</head>

<body>

    <div class="rectangle">

        <div class="circle"></div>

    </div>

    <script src="../Js/jquery-1.11.3.min.js"></script>

    <script>

        (function(){

            //圆周运动js实现

            var circle=$('.circle');

            var rect=$('.rectangle');

            //获取半径和圆心

            var centerX=(rect.width()-circle.width())/2;

            var centerY=(rect.height()-circle.height())/2;

            var radius=centerX;

            //时间递进

            var times=0;

            //重绘位置

            function reset(){

                times+=1;

                var hudu=(2*Math.PI/360)*times;

                //console.info(hudu);

                var x=centerX+Math.sin(hudu)*radius;

                var y=centerY+Math.cos(hudu)*radius;

                circle.css({

                    left:x,

                    top:y

                });

                //调用自己

               requestAnimationFrame(reset);

            }

            //启动定时器

            requestAnimationFrame(reset);

        })();

    </script>

</body>

</html>

逆时针旋转效果：

二、使用CSS实现圆周运动

使用transform的rotate方法实现旋转，需要重点设置一下圆心位置

源代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    @keyframes run{

        from{

          transform:rotate(0deg);

        }

        to{

           transform:rotate(360deg);

        }

    }

    .circle{

        width:20px;

        height:20px;

        background:blue;

        border-radius:50%;

        position: absolute;

        transform-origin:110px 110px;

        animation:run 5s linear infinite;

        left:40px;

        top:40px;

    }

    .rectangle{

        width:300px;

        height:300px;

        border:1px solid red;

        position: relative;

    }

    </style>

</head>

<body>

    <div class="rectangle">

        <div class="circle"></div>

    </div>

</body>

</html>

顺时针旋转效果：

更多：

HTML5 <a>标签download 属性

html5 拖放---（二）转

浏览器记住密码、浏览器记住密码表单自动加载

HTML5实现简单圆周运动示例的更多相关文章

  1. html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...

  2. LayaAir引擎开发HTML5最简单教程(面向JS开发者)

    LayaAir引擎开发HTML5最简单教程(面向JS开发者) 一.总结 一句话总结:开发游戏还是得用游戏引擎来开发,其实很简单啦 切记:开发游戏还是得用游戏引擎来开发,其实很简单,引擎很多东西都帮你做 ...

  3. 【java开发系列】—— spring简单入门示例

    1 JDK安装 2 Struts2简单入门示例 前言 作为入门级的记录帖,没有过多的技术含量,简单的搭建配置框架而已.这次讲到spring,这个应该是SSH中的重量级框架,它主要包含两个内容:控制反转 ...

  4. Springmvc整合tiles框架简单入门示例（maven）

    Springmvc整合tiles框架简单入门示例(maven) 本教程基于Springmvc,spring mvc和maven怎么弄就不具体说了,这边就只简单说tiles框架的整合. 先贴上源码(免积 ...

  5. hadoop环境安装及简单Map-Reduce示例

    说明:这篇博客来自我的csdn博客,http://blog.csdn.net/lxxgreat/article/details/7753511 一.参考书:<hadoop权威指南--第二版(中文 ...

  6. EasyHook远注简单监控示例 z

    http://www.csdn 123.com/html/itweb/20130827/83559_83558_83544.htm 免费开源库EasyHook(inline hook),下面是下载地址 ...

  7. Web Service简单入门示例

    Web Service简单入门示例     我们一般实现Web Service的方法有非常多种.当中我主要使用了CXF Apache插件和Axis 2两种. Web Service是应用服务商为了解决 ...

  8. 【html5】html5本地简单存储

    html5本地简单存储 HTML5 提供了四种在客户端存储数据的新方法,即 localStorage .sessionStorage.globalStorage.Web Sql Database. 前 ...

  9. Ext简单demo示例

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

随机推荐

  1. 2017 icpc 沈阳 G - Infinite Fraction Path

    题目大意:有n个点, 每个点有一个数字0 - 9, 第 i 个点只能到 第(i * i + 1)个点,问你在哪个点出发走n次构成的数字串最大. 思路:利用求后缀数组的倍增比较思想, 许多细节需要注意. ...

  2. MongoDB 安全配置

    前言 随着MongoDB使用人群企业越来越广泛,黑客的注意力也转移到了其中.比如去年很火热的MongoDB劫持事件,很多人对MongoDB的安全也越来越重视.今天,我们就简单总结一些MongoDB的安 ...

  3. NAT虚拟网络配置

     NAT虚拟网络配置(Linux能上网) 1.先设置虚拟机的虚拟网络,设置里面的子网ip和网关ip地址: 有两种方式:①setup命令(不选DHCP,因为它是动态分配IP地址的) ②vi /etc/s ...

  4. rabbitmq学习（四） —— 发布订阅

    为了说明这种模式,我们将建立一个简单的日志系统.这个系统将由两个程序组成,第一个将发出日志消息,第二个将接收并处理日志消息.在我们的日志系统中,每一个运行的接收程序的副本都会收到日志消息. 交换器(E ...

  5. liunx的命令大全

  6. 基于图文界面的蓝牙扫描工具btscanner

    基于图文界面的蓝牙扫描工具btscanner   btscanner是Kali Linux内置的一款蓝牙扫描工具.它提供图文界面,更便于渗透测试人员查看扫描信息.该工具会自动使用主机所有的蓝牙接口,并 ...

  7. code vs 1094 FBI树 2004年NOIP全国联赛普及组

    题目描述 Description 我们可以把由“0”和“1”组成的字符串分为三类:全“0”串称为B串,全“1”串称为I串,既含“0”又含“1”的串则称为F串. FBI树是一种二叉树[1],它的结点类型 ...

  8. 「BZOJ 4228」Tibbar的后花园

    「BZOJ 4228」Tibbar的后花园 Please contact lydsy2012@163.com! 警告 解题思路 可以证明最终的图中所有点的度数都 \(< 3\) ,且不存在环长是 ...

  9. 邻接矩阵实现图的存储，DFS，BFS遍历

    图的遍历一般由两者方式:深度优先搜索(DFS),广度优先搜索(BFS),深度优先就是先访问完最深层次的数据元素,而BFS其实就是层次遍历,每一层每一层的遍历. 1.深度优先搜索(DFS) 我一贯习惯有 ...

  10. bzoj1151 动物园

    Description 新建的圆形动物园是亚太地区的骄傲.圆形动物园坐落于太平洋的一个小岛上,包含一大圈围栏,每个围栏里有一 种动物.如下图所示: 你是动物园的公共主管.你要做的是,让每个来动物园的人 ...