HTML5实现简单圆周运动示例
一、使用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实现简单圆周运动示例的更多相关文章
- html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...
- LayaAir引擎开发HTML5最简单教程(面向JS开发者)
LayaAir引擎开发HTML5最简单教程(面向JS开发者) 一.总结 一句话总结:开发游戏还是得用游戏引擎来开发,其实很简单啦 切记:开发游戏还是得用游戏引擎来开发,其实很简单,引擎很多东西都帮你做 ...
- 【java开发系列】—— spring简单入门示例
1 JDK安装 2 Struts2简单入门示例 前言 作为入门级的记录帖,没有过多的技术含量,简单的搭建配置框架而已.这次讲到spring,这个应该是SSH中的重量级框架,它主要包含两个内容:控制反转 ...
- Springmvc整合tiles框架简单入门示例（maven）
Springmvc整合tiles框架简单入门示例(maven) 本教程基于Springmvc,spring mvc和maven怎么弄就不具体说了,这边就只简单说tiles框架的整合. 先贴上源码(免积 ...
- hadoop环境安装及简单Map-Reduce示例
说明:这篇博客来自我的csdn博客,http://blog.csdn.net/lxxgreat/article/details/7753511 一.参考书:<hadoop权威指南--第二版(中文 ...
- EasyHook远注简单监控示例 z
http://www.csdn 123.com/html/itweb/20130827/83559_83558_83544.htm 免费开源库EasyHook(inline hook),下面是下载地址 ...
- Web Service简单入门示例
Web Service简单入门示例 我们一般实现Web Service的方法有非常多种.当中我主要使用了CXF Apache插件和Axis 2两种. Web Service是应用服务商为了解决 ...
- 【html5】html5本地简单存储
html5本地简单存储 HTML5 提供了四种在客户端存储数据的新方法,即 localStorage .sessionStorage.globalStorage.Web Sql Database. 前 ...
- Ext简单demo示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
随机推荐
- 【AtCoder】ARC088
C - Multiple Gift 题解 首项是X,每次乘个2,暴力统计 代码 #include <bits/stdc++.h> #define fi first #define se s ...
- Mysql创建用户并授权以及开启远程访问
Mysql创建用户并授权以及开启远程访问 一.创建用户并授权 1.登录mysql mysql -u root -p 2.创建数据库 create database test;//以创建test ...
- 001.MySQL高可用主从复制简介
一 简介 1.1 概述 Mysql内建的复制功能是构建大型,高性能应用程序的基础.将Mysql的数据分布在多个系统之上,这种分布的机制,是通过将Mysql的某一台主机的数据复制到其它主机(slaves ...
- 循序渐进学.Net Core Web Api开发系列【2】：利用Swagger调试WebApi
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 既然前后端 ...
- http://blog.mn886.net/jqGrid/
http://blog.mn886.net/jqGrid/ 中文版 http://www.trirand.com/blog/jqgrid/jqgrid.html 英文版
- Java 操纵XML之创建XML文件
Java 操纵XML之创建XML文件 一.JAVA DOM PARSER DOM interfaces The DOM defines several Java interfaces. Here ar ...
- BZOJ.3265.志愿者招募加强版(费用流SPFA)
题目链接 见上题. 每类志愿者可能是若干段,不满足那个...全幺模矩阵(全单位模矩阵)的条件,所以线性规划可能存在非整数解. 于是就可以用费用流水过去顺便拿个rank2 233. //20704kb ...
- 【BZOJ-4184 】 Shallot 线段树按时间分治 + 线性基
4184: shallot Time Limit: 30 Sec Memory Limit: 128 MBSubmit: 356 Solved: 180[Submit][Status][Discu ...
- J-Link Version
"J-Link / Flasher Portable V1 " "J-Link ARM / Flasher ARM V2 " "J-Link ARM ...
- WebConfig 加密解密的原理是什么?
WebConfig 加密解密的原理是什么? 使用命令 加密数据连接串 加密:aspnet_regiis -pef connectionStrings d:/...(webconfig所在路径,不能含中 ...