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 相关文章推荐
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
AngularJS基础知识
Dec 21 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
一文搞懂ES6中的Map和Set
May 20 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
OpenLayers3实现测量功能
Sep 25 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
PHP5+UTF8多文件上传类
2008/10/17 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
php 实现进制相互转换
2016/04/07 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
用脚本调用样式的几种方法
2006/12/09 Javascript
超级退弹代码
2008/07/07 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
详解Python中的文本处理
2015/04/11 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
中软国际Java程序员笔试题
2014/07/19 面试题
Delphi CS笔试题
2014/01/04 面试题
客房主管岗位职责
2013/12/09 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
《母鸡》教学反思
2014/02/25 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
2016入党心得体会范文
2016/01/06 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS