脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 画圆圈的小球

JS完成画圆圈的小球

 更新时间：2017年03月07日 14:05:35   作者：欧阳翠花  
本文主要介绍了JS完成画圆圈的小球的实例，具有很好的参考价值。下面跟着小编一起来看下吧

效果图

 

图（1）

图（2）

代码如下：

<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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 浅析JavaScript中var that=this

    浅析JavaScript中var that=this

    this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。接下来通过本文给大家分享JavaScript中var that=this所代表的意思，需要的朋友参考下吧
    2017-02-02
  • Javascript的&&和||的另类用法

    Javascript的&&和||的另类用法

    这篇文章主要介绍了Javascript的&&和||的另类用法,需要的朋友可以参考下
    2014-07-07
  • Javascript中call和apply函数的比较和使用实例

    Javascript中call和apply函数的比较和使用实例

    这篇文章主要介绍了Javascript中call和apply函数的比较和使用实例,本文试图用更加清晰简单的思路来分析解释这两个函数,需要的朋友可以参考下
    2015-02-02
  • 基于JS模仿windows文件按名称排序效果

    基于JS模仿windows文件按名称排序效果

    这篇文章主要介绍了基于JS实现模仿windows文件按名称排序的相关资料,主要是对数字的处理操作，非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • 前端JS压缩图片的原理详解(附源码)

    前端JS压缩图片的原理详解(附源码)

    上传图片/视频/文件是我们经常会遇到的问题,但是一旦图片过大就会导致不好的操作体验,下面这篇文章主要给大家介绍了关于前端JS压缩图片原理及实现的相关资料,需要的朋友可以参考下
    2024-06-06
  • 浅谈jQuery中setInterval()方法

    浅谈jQuery中setInterval()方法

    这篇文章主要介绍了浅谈jQuery中setInterval()方法，十分的简单实用，有需要的小伙伴可以参考下。
    2015-07-07
  • 2007/12/23更新创意无限,简单实用(javascript log)

    2007/12/23更新创意无限,简单实用(javascript log)

    在javascript开发过程中，如果总是使用alert的方式调试程序，在某些简单的程序中是可行的. 但是在通常的项目很复杂，这种方式已经很难满足，企业级开发的需要。
    2007-12-12
  • D3.js实现折线图的方法详解

    D3.js实现折线图的方法详解

    众所周知图表是数据图形化的表示，通过形象的图表来展示数据，比如条形图，折线图，饼图等等。可视化图表可以帮助开发者更容易理解复杂的数据，提高生产的效率和 Web 应用和项目的可靠性。现在就让我们大家一起来学习用D3.js来实现折线图。
    2016-09-09
  • js调用设备摄像头的方法

    js调用设备摄像头的方法

    这篇文章主要为大家详细介绍了js调用设备摄像头的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • Javascript实现仿QQ随机数验证

    Javascript实现仿QQ随机数验证

    这篇文章主要为大家详细介绍了Javascript实现仿QQ随机数验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05

最新评论