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 相关文章推荐
ExtJS Window 最小化的一种方法
Nov 18 Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
jQuery事件对象总结
Oct 17 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
vue常用高阶函数及综合实例
Feb 25 Vue.js
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
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
JS判定是否原生方法
2013/07/22 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
js 操作符汇总
2014/11/08 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
python使用any判断一个对象是否为空的方法
2014/11/19 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
乔丹名人堂演讲稿
2014/05/24 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers