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 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
用PHP动态创建Flash动画
2006/10/09 PHP
最小化数据传输――在客户端存储数据
2006/10/09 PHP
UCenter Home二次开发指南
2009/05/28 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
python中zip()方法应用实例分析
2016/04/16 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
详解python运行三种方式
2019/05/13 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
Django通过json格式收集主机信息
2020/05/29 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
《蒲公英》教学反思
2014/02/28 职场文书
五一手机促销方案
2014/03/08 职场文书
动员大会主持词
2014/03/20 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
退休教师追悼词
2015/06/23 职场文书
小学数学教学随笔
2015/08/14 职场文书