JS完成画圆圈的小球


Posted in Javascript onMarch 07, 2017

效果图

 JS完成画圆圈的小球

图(1)

JS完成画圆圈的小球

图(2)

代码如下:

<html>
<head>
<title>JS动画之转动的小球</title>
<style type="text/css">
div{width:20px;height:20px;background-color:black;position:absolute;border:1px solid red;border-radius:50%;}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var box=document.getElementById('box');
box.style.left="600";
box.style.top="300px";
var n=0;         //正弦函数的横坐标,理解为时间轴好一点。
function rotation()
{
 box.style.left=(600-Math.sin(1/180)*80)+Math.sin(n/180)*80+"px";  //300是小球的没开始运动的初始位置,n表示时间轴,后边是除数是为了将时间细分,使运动更平滑,80表示半径。
 box.style.top=(300-Math.cos(1/180)*80)+Math.cos(n/180)*80+"px";  //第一个括号中的内容是为了让小球在开始运动时处于初始位置(300,300)
 var dr = document.createElement('div');
 dr.style.left=(600-Math.sin(1/180)*80)+Math.sin(n/180)*80+"px";
 dr.style.top=(300-Math.cos(1/180)*80)+Math.cos(n/180)*80+"px";
 document.body.appendChild(dr);
 n++;
 if(n>180*2*Math.PI)return false;  // 0 到 2π 为一个转动周期,如果要半圆,只需将n的取值范围减半,如需反方向转动,调换left和top的值即可。
 setTimeout(rotation,1);
}
rotation();
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
基于jquery的超简单上下翻
Apr 20 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
基于构造函数的五种继承方法小结
Jul 27 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
jquery实现抽奖功能
Oct 22 jQuery
jQuery Chosen通用初始化
Mar 07 #Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 #Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 #Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 #Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 #Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 #Javascript
AngularJS监听路由变化的方法
Mar 07 #Javascript
You might like
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
javascript 定义初始化数组函数
2009/09/07 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
解析js如何获取css样式
2016/12/11 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python字典快速保存于读取的方法
2018/03/23 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
指针和引用有什么区别
2013/01/13 面试题
医科大学生毕业的自我评价分享
2013/11/12 职场文书
数学专业推荐信范文
2013/11/21 职场文书
远程培训的心得体会
2014/09/01 职场文书
放弃继承权公证书
2015/01/23 职场文书
张丽莉观后感
2015/06/16 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript