JavaScript实现小球沿正弦曲线运动


Posted in Javascript onSeptember 07, 2020

本文实例为大家分享了js实现小球沿正弦曲线运动的具体代码,供大家参考,具体内容如下

效果图:

JavaScript实现小球沿正弦曲线运动

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 .dot{
 margin-top: 300px;
 position: absolute;
 width: 1px;
 height: 1px;
 background: #000000;
 }
 #ball{
 width: 10px;
 height: 10px;
 background: red;
 border: 1px solid red;
 position: absolute;
 border-radius: 10px;
 }
 </style>
</head>
<body>
 
<div style="position: relative; width: 600px;
height: 600px;
 border: 1px solid #000000" id="draw_bo" >
</div>
<div id="ball" ></div>
<script type="text/javascript">
 var dom=document.getElementById("draw_bo");
 var ball=document.getElementById("ball");
 var x=0,y=300;
 ball.style.left=x+"px";//小球初始坐标x
 ball.style.top=y+"px";//小球初始坐标y
 for(var angle=0;angle<600;angle+=0.01){//画正弦线
 var childDot=document.createElement('div');
 childDot.className='dot';
 childDot.style.top=300*(Math.sin(angle*Math.PI/300))+"px";
 childDot.style.left=angle+"px";
 dom.appendChild(childDot);
 }
 var time=setInterval(function () {
 x=x+5;//小球运动速度
 y=Math.floor(Math.sin(x/600*2*Math.PI)*300)+300;//小球运动的高度
 if(x>600) x=0;
 ball.style.left=x+"px";
 ball.style.top=y+"px";
 },100);
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
Angular 应用技巧总结
Sep 14 Javascript
js实现日历的简单算法
Jan 24 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 #Javascript
微信小程序开发问题之wx.previewImage
Dec 25 #Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 #Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 #Javascript
使用gulp构建前端自动化的方法示例
Dec 25 #Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 #Javascript
详解vuex commit保存数据技巧
Dec 25 #Javascript
You might like
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
小程序云开发实战小结
2018/10/25 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
python检测远程服务器tcp端口的方法
2015/03/14 Python
python下10个简单实例代码
2017/11/15 Python
python 不以科学计数法输出的方法
2018/07/16 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
业务部经理岗位职责
2014/01/04 职场文书
绿色学校实施方案
2014/03/31 职场文书
兴趣小组活动总结
2014/05/05 职场文书
婚纱店策划方案
2014/05/22 职场文书
三八节标语
2014/06/27 职场文书
民主评议党员总结
2014/10/20 职场文书
综合素质评价自我评价
2015/03/06 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
中学总务处工作总结
2015/08/12 职场文书
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers