脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Javascript实现可旋转的圆圈

Javascript实现可旋转的圆圈实例代码

 更新时间：2015年08月04日 13:06:59   作者：皮蛋  
这篇文章主要介绍了Javascript实现可旋转的圆圈实例代码,可实现圆圈的旋转与运动效果,涉及javascript动态操作页面元素属性及进行相应数学运算的技巧,需要的朋友可以参考下

本文实例讲述了Javascript实现可旋转的圆圈。分享给大家供大家参考。具体如下：

这里基于Javascript实现会旋转的圆圈，有点三维变幻的效果，立体感很强，代码主要是基于JS，学习Js脚本编程来说，是个学习JS生成动画的好范例。

运行效果如下图所示：

具体代码如下：

<html>
<head>
<title>旋转的圆圈</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<script language="JavaScript">
amount=ybase=15;
Color='#ffaaff';
GlowColor='#ff00ff';
xbase=-70;
step=c=0.05;
TrigSplit=360/amount;
xpos=ypos=currStep=Ci=0;
for (i=0; i < amount; i++)
  document.write('<div id="Div" style="position:absolute;top:0px;left:0px;height:20;width:20;text-align:center"><B>.</B></div>');
function running(){
  var MY=document.body.scrollTop+document.body.clientHeight/2 + document.body.clientHeight/2.8*Math.cos((Ci)/4)*Math.cos(Ci/10);
  var MX=document.body.scrollLeft+document.body.clientWidth/2 + document.body.clientWidth/2.4*Math.sin((Ci)/6)*Math.sin(Ci/20);
  ypos=MY;
  xpos=MX;
  for (i=0; i < amount; i++){
    var d=Div[i].style;
    if (d.pixelTop > ypos+2){
      d.fontSize=18;
       d.paddingTop=7;
       d.filter='glow(color='+GlowColor+', strength=7)';
      if (d.pixelTop > ypos+10){
         d.fontSize=15;
        d.paddingTop=10;
        d.filter='glow(color='+GlowColor+', strength=5)';
       }
    }
    else{
      d.fontSize=25;
       d.paddingTop=0;
      d.color=Color;
       d.filter='glow(color='+GlowColor+', strength=8)';
    }
    d.top=ypos+ybase*Math.sin(currStep+i*TrigSplit*Math.PI/180);
    d.left=xpos+xbase*Math.cos(currStep+i*TrigSplit*Math.PI/180);
  }
  Ci+=c;
  currStep+=step;
  setTimeout('running()',20);
}
running();
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 防止浏览器记住用户名及密码的简单实用方法

    防止浏览器记住用户名及密码的简单实用方法

    很多浏览器都有自动填写功能，我在input上使用了autocomplete="off"，但在有的浏览器上还是被记住了用户名跟密码，请问有没有更有效及简便的方法来防止浏览器记住用户名及密码
    2013-04-04
  • JavaScript实现异步任务循环顺序执行详解

    JavaScript实现异步任务循环顺序执行详解

    这篇文章主要为大家详细介绍了JavaScript中实现异步任务循环顺序执行的方法，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
    2023-03-03
  • 详解JavaScript的BUG和错误

    详解JavaScript的BUG和错误

    本篇内容给大家总结了JavaScript的BUG和错误，如果大家对此知识点有兴趣，可以跟着学习参考下。
    2018-05-05
  • javascript防篡改对象实例详解

    javascript防篡改对象实例详解

    这篇文章主要介绍了javascript防篡改对象,结合实例形式分析了防篡改对象的三个级别与具体使用技巧,需要的朋友可以参考下
    2017-04-04
  • JS继承与闭包及JS实现继承的三种方式

    JS继承与闭包及JS实现继承的三种方式

    大家都知道，面向对象的三大特征——封装、继承、多态。下面通过本文给大家介绍JS继承与闭包及JS实现继承的三种方式，感兴趣的朋友一起看看吧
    2017-10-10
  • js字符串倒序的实例代码

    js字符串倒序的实例代码

    这篇文章主要介绍了js字符串倒序的实例代码,代码分为3部分，给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-11-11
  • uniapp在开发app时上传文件时的问题记录

    uniapp在开发app时上传文件时的问题记录

    在开发uniapp应用时,可能会遇到文件上传功能在iOS和部分Android手机上不兼容的问题,经过对比分析,发现问题可能出在文件的路径上,通过使用uni.saveFile方法保存文件后,再上传可以解决问题,这篇文章详细介绍了解决方案,并引导读者参考更多相关内容
    2024-09-09
  • 使用base64对图片的二进制进行编码并用ajax进行显示

    使用base64对图片的二进制进行编码并用ajax进行显示

    这篇文章主要介绍了使用base64对图片的二进制进行编码并用ajax进行显示的相关资料,需要的朋友可以参考下
    2017-01-01
  • JavaScript用200行代码制作打飞机小游戏实例

    JavaScript用200行代码制作打飞机小游戏实例

    本篇文章主要介绍了JavaScript用200行代码制作打飞机小游戏实例，非常具有实用价值，需要的朋友可以参考下
    2017-06-06
  • JavaScript Canvas绘制六边形网格

    JavaScript Canvas绘制六边形网格

    这篇文章主要为大家详细介绍了JavaScript Canvas绘制六边形网格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-01-01

最新评论