欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS完成画圆圈的小球

程序员文章站 2023-11-20 12:24:34
效果图   图(1) 图(2) 代码如下: js动画之转动...</div> <div class="content"> <p><strong>效果图</strong></p> <p style="text-align: center"> <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTA2MTMvYl8wXzIwMTkwNjEzMjIxMzQwNzgzNS5wbmc=" alt="JS完成画圆圈的小球" title="JS完成画圆圈的小球"></p> <p style="text-align: center">图(1)</p> <p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTA2MTMvYl8wXzIwMTkwNjEzMjIxMzQwMjg3OS5wbmc=" alt="JS完成画圆圈的小球" title="JS完成画圆圈的小球"></p> <p style="text-align: center">图(2)</p> <p><strong>代码如下:</strong></p> <div class="jb51code"> <pre class="brush: javascript;"> <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></pre> </div> <p>以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!</p> </div> <div class="info-pre-next"> <p> 上一篇: <a href="/article/2154767.html"> Node.js查找当前目录下文件夹实例代码 </a> </p> <p> 下一篇: <a href="/article/2154769.html"> zbar解码二维码和条形码示例 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2211804.html" target="_blank" title="原生JS实现DOM加载完成马上执行JS代码的方法"> <h2> 原生JS实现DOM加载完成马上执行JS代码的方法 </h2> </a> </li> <li> <a href="/article/2202425.html" target="_blank" title="浅谈Vue.js 关于页面加载完成后执行一个方法的问题"> <h2> 浅谈Vue.js 关于页面加载完成后执行一个方法的问题 </h2> </a> </li> <li> <a href="/article/2154768.html" target="_blank" title="JS完成画圆圈的小球"> <h2> JS完成画圆圈的小球 </h2> </a> </li> <li> <a href="/article/2089797.html" target="_blank" title="原生JS实现DOM加载完成马上执行JS代码的方法"> <h2> 原生JS实现DOM加载完成马上执行JS代码的方法 </h2> </a> </li> <li> <a href="/article/2065265.html" target="_blank" title="JS实现的添加弹出层并完成锁屏操作示例"> <h2> JS实现的添加弹出层并完成锁屏操作示例 </h2> </a> </li> <li> <a href="/article/2026374.html" target="_blank" title="页面加载完成后再执行JS的jquery写法以及区别说明"> <h2> 页面加载完成后再执行JS的jquery写法以及区别说明 </h2> </a> </li> <li> <a href="/article/2017967.html" target="_blank" title="浅谈Vue.js 关于页面加载完成后执行一个方法的问题"> <h2> 浅谈Vue.js 关于页面加载完成后执行一个方法的问题 </h2> </a> </li> <li> <a href="/article/2004131.html" target="_blank" title="JS定时检测任务任务完成后执行下一步的解决办法"> <h2> JS定时检测任务任务完成后执行下一步的解决办法 </h2> </a> </li> <li> <a href="/article/1973795.html" target="_blank" title="js读取Excel表格,js完成点击复制数据的代码教程"> <h2> js读取Excel表格,js完成点击复制数据的代码教程 </h2> </a> </li> <li> <a href="/article/1827609.html" target="_blank" title="利用ECharts.js画K线图的方法示例"> <h2> 利用ECharts.js画K线图的方法示例 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益,请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号:<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>