JavaScript实现定点圆周运动
目是这样的：假设有一定点（400px,300px），通过JavaScript使一个直径20px的圆点以 r=180px 为半径围绕该点做匀速圆周运动。
这个问题的整体实现思想应该是这样的，看到“半径”，“圆周运动”这些字眼首先应该想到的是数学方法，想到sin,cos这些三角函数。有了定点坐标和半径 r，我们可以初始化一个角度 a，通过 400-cos(a)*r 和 300-sin(a)*r 来分别获取圆点相对于定点在角度为 a 时刻的横纵坐标，至于匀速的问题，可以通过 setInterval()方法来处理。
<!DOCTYPE html>
<meta charset="utf-8"/>
<style>
body {
margin: 0;
background: #2b5996;
}
#earth {
width: 20px;
height: 20px;
border-radius: 10px;
position: absolute;
background: url(images/earth.jpg);
} #sun{
position: absolute;
top: 275px;
left: 375px;
}
</style>
<div id="earth"></div>
<div id="sun"><img src="data:images/sun.jpg"></div>
<script>
var r = 180;
var b = document.getElementById("earth");
var t = 0;
var xy = {top: 0, left: 0};
setInterval(function(){
xy.top = 300 - Math.sin(t)* r;
xy.left = 400 - Math.cos(t)* r;
b.setAttribute("style", 'top: ' + xy.top + 'px; left: ' + xy.left + 'px');
t += 0.01;
},20);
</script>
示例：http://shaozhuang.me/demo/yuanzhou.html
JavaScript实现定点圆周运动的更多相关文章
- 原生JavaScript运动功能系列（五）：定时定点运动
原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaS ...
- JavaScript动画知多少？
今天,小学生以自己浅薄的见地,在前辈大能的基础上写这篇文章,希望给大家打开一扇窥探JavaScript(以下简称JS)动画的窗户. JS如何制造出动画效果? 结合浏览器提供的 setInterval ...
- javascript实用技巧、javascript高级技巧
字号+作者:H5之家 来源:H5之家 2016-10-31 11:00 我要评论( ) 三零网提供网络编程. JavaScript 的技术文章javascript实用技巧.javascript高级技巧 ...
- javascript运动系列第三篇——曲线运动
× 目录 [1]圆周运动[2]三维圆周 [3]钟摆运动 [4]抛物线[5]流体运动 前面的话 上一篇介绍了变速运动,但只实现了直线运动.如果元素的left和top同时运动,并遵循不同的曲线公式,则会进 ...
- javascript运动系列第二篇——变速运动
× 目录 [1]准备工作 [2]加速运动 [3]重力运动[4]减速运动[5]缓冲运动[6]加减速运动[7]往复运动[8]变速函数 前面的话 前面介绍过匀速运动的实现及注意事项,本文在匀速运动的基础上, ...
- javascript的列表切换
演示地址:http://wjf444128852.github.io/demo/Carousel/index.html IE兼容性没处理,确切的说不太会,还望指点一二 思路: 1.js获取要给定点击事 ...
- JavaScript开发的技巧
1. 使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但===和!==不会,它们会同时比较值和数据类型,这也使得它们要比==和!=快. "){ //速度慢 } & ...
- Javascript实现时钟
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- javascript实现有向无环图中任意两点最短路径的dijistra算法
有向无环图 一个无环的有向图称做有向无环图(directed acycline praph).简称DAG 图.DAG 图是一类较有向树更一般的特殊有向图, dijistra算法 摘自 http://w ...
随机推荐
- oracle 集合定义
集合:是具有相同定义的元素的聚合.Oracle有两种类型的集合: 可变长数组(VARRAY):可以有任意数量的元素,但必须预先定义限制值. 嵌套表:视为表中之表,可以有任意数量的元素,不需要预先定义限 ...
- jquery settimeout使用
setTimeout(location,5000); //延迟5秒刷新页面 function location(){ window.location.href = window.location.hr ...
- python核心编程-第四章-习题
1.身份.类型.值.其中,身份是每个对象的标识,与内存地址密切相关,可用id()返回:类型决定了对象可以保存什么类型的值,用type()函数.isinstance()函数可以得到对象的类型:值就是对象 ...
- 关于521(nyoj)
关于521 点击这里 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 Acm队的流年对数学的研究不是很透彻,但是固执的他还是想一头扎进去. 浏览网页的流年忽然看到了网上有 ...
- X光机的原理及构造
一.X射线的发现 1895年德国物理学家伦琴(W．C．RÖntgen)在研究阴极射线管中气体放电现象时,用年伦琴荣获物理学第一个诺贝尔奖金.科学总是在不断发展的,经伦琴及各国科学家的反复实践和研究,逐 ...
- Delphi获取系统服务描述信息
program Project1; {$APPTYPE CONSOLE} uses Windows, WinSvc; type SERVICE_DESCRIPTION = packed record ...
- linux之普通用户与root用户之间切换
- POJ 1562 Oil Deposits (并查集 OR DFS求联通块)
Oil Deposits Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 14628 Accepted: 7972 Des ...
- 新闻公布系统 (Asp.net 三层架构 )
2012年度课程设计---新闻公布系统(小结) ...
- Oracle日志文件常用操作
Oracle关于日志文件基本操作1.查询系统使用的是哪一组日志文件:select * from v$log; 2.查询正在使用的组所对应的日志文件:select * from v$logfile; 3 ...