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 相关文章推荐
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
jquery自定义表格样式
Nov 23 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
react中使用swiper的具体方法
May 15 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
js实现右键菜单功能
2016/11/28 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
vue实现图片裁剪后上传
2020/12/16 Vue.js
python赋值操作方法分享
2013/03/23 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
Python定时执行之Timer用法示例
2015/05/27 Python
Python延时操作实现方法示例
2018/08/14 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
行政专员的岗位职责
2014/03/10 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
教师工作表现自我评价
2015/03/05 职场文书
2019秋季运动会口号
2019/06/25 职场文书