目是这样的：假设有一定点（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实现定点圆周运动的更多相关文章

  1. 原生JavaScript运动功能系列（五）：定时定点运动

    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaS ...

  2. JavaScript动画知多少？

    今天,小学生以自己浅薄的见地,在前辈大能的基础上写这篇文章,希望给大家打开一扇窥探JavaScript(以下简称JS)动画的窗户. JS如何制造出动画效果? 结合浏览器提供的 setInterval ...

  3. javascript实用技巧、javascript高级技巧

    字号+作者:H5之家 来源:H5之家 2016-10-31 11:00 我要评论( ) 三零网提供网络编程. JavaScript 的技术文章javascript实用技巧.javascript高级技巧 ...

  4. javascript运动系列第三篇——曲线运动

    × 目录 [1]圆周运动[2]三维圆周 [3]钟摆运动 [4]抛物线[5]流体运动 前面的话 上一篇介绍了变速运动,但只实现了直线运动.如果元素的left和top同时运动,并遵循不同的曲线公式,则会进 ...

  5. javascript运动系列第二篇——变速运动

    × 目录 [1]准备工作 [2]加速运动 [3]重力运动[4]减速运动[5]缓冲运动[6]加减速运动[7]往复运动[8]变速函数 前面的话 前面介绍过匀速运动的实现及注意事项,本文在匀速运动的基础上, ...

  6. javascript的列表切换

    演示地址:http://wjf444128852.github.io/demo/Carousel/index.html IE兼容性没处理,确切的说不太会,还望指点一二 思路: 1.js获取要给定点击事 ...

  7. JavaScript开发的技巧

    1. 使用===取代==    ==和!=操作符会在需要的情况下自动转换数据类型.但===和!==不会,它们会同时比较值和数据类型,这也使得它们要比==和!=快. "){ //速度慢 } & ...

  8. Javascript实现时钟

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. javascript实现有向无环图中任意两点最短路径的dijistra算法

    有向无环图 一个无环的有向图称做有向无环图(directed acycline praph).简称DAG 图.DAG 图是一类较有向树更一般的特殊有向图, dijistra算法 摘自 http://w ...

随机推荐

  1. 国外大神Leo-G的 DevopsWiki

    https://raw.githubusercontent.com/Leo-G/DevopsWiki/master/README.md 总结的太好了,直接把md文件贴过来好了!慢慢学习!分享给大家,觉 ...

  2. Linux系统下用C语言获取MAC地址

    最近在做一个小程序,需要用到在linux系统里编写C程序从而获取MAC地址,从网上搜了一遍,想总结一下.如果你就只需要单个功能的程序,可以采用方法一,见代码1,一般最好能够封装起来,写成获取MAC地址 ...

  3. mysql隔离级别的设置和检索

    001.设置方式: 001.在/etc/my.cnf配置文件中设置,这个格式一定要记清楚呀! transaction-isolation=READ-COMMITTED 这里要写在“-”号不是“_&qu ...

  4. C/S与B/S

    C/S架构简要介绍 在了解什么是B/S架构之前,我们有必要了解一下什么是C/S架构: C/S架构是第一种比较早的软件架构,主要用于局域网内.也叫 客户机/服务器模式. 它可以分为客户机和服务器两层:第 ...

  5. QT：“下载速度柱状图”的模拟实现——思路真好，会动脑筋，连我都有了启发（这个思路好像是通用的）

    不知是哪个版本的迅雷,有个“下载速度柱状图”的小界面,我比较喜欢(只不过最新版本的迅雷却没了),所以决定来山寨一个.当然,这个山寨品不能下载文件,呵呵. 思路:1:将界面的背景涂成黑色2:每隔0.1秒 ...

  6. 网易云课堂_艾叔：零基础一站式C语言|C程序设计精讲_章节12:指针

    课时63指针操作数组 二维数组 #include <stdio.h> #include <stdlib.h> int main() { int age[2][4] = { 1, ...

  7. 位运算 （&|）与--或 一位数组表示多种意思～～ 与--或

    var arr:Array = [0,1,2,4,8,16] var gate:int = 0; gate |= arr[1] gate |= arr[2] gate |= arr[3] trace( ...

  8. Matlab lugui

    function [L,U,pv,qv] = lugui(A,pivotstrat) %LUGUI Gaussian elimination demonstration. % % LUGUI(A) s ...

  9. 【最大团】【HDU1530】【Maximum Clique】

    先上最大团定义: 最大团问题(Maximum Clique Problem, MCP)是图论中一个经典的组合优化问题,也是一类NP完全问题,在国际上已有广泛的研究,而国内对MCP问题的研究则还处于起步 ...

  10. 【枚举+贪心】【ZOJ3715】【Kindergarten Electiond】

    题目大意: n 个人 在选取班长 1号十分想当班长,他已经知道其他人选择了谁,但他可以贿赂其他人改选他,问贿赂的最小值 ps.他自己也要投一个人 要处理一个问题是,他自己投谁 其实这个问题在这种局面下 ...