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事件串连执行多个处理过程的方法
Mar 09 Javascript
top.location.href 没有权限 解决方法
Aug 05 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 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 生成WML页面方法详解
2009/08/09 PHP
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
JS模板实现方法
2013/04/03 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Python遍历pandas数据方法总结
2018/02/09 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
生产总经理岗位职责
2013/12/19 职场文书
预备党员承诺书
2014/03/25 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
党委领导班子整改方案
2014/09/30 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
滴水洞导游词
2015/02/10 职场文书
教学督导岗位职责
2015/04/10 职场文书