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


Posted in Javascript onAugust 04, 2015

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

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

运行效果如下图所示:

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

具体代码如下:

<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程序设计有所帮助。

Javascript 相关文章推荐
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
javascript 闭包疑问
Dec 30 Javascript
javascript针对DOM的应用实例(一)
Apr 15 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
JavaScript数组各种常见用法实例分析
Aug 04 #Javascript
基于Jquery实现表单验证
Jul 20 #Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 #Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 #Javascript
javascript控制图片播放的实现代码
Jul 29 #Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 #Javascript
Javascript实现鼠标右键特色菜单
Aug 04 #Javascript
You might like
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
python基础教程之面向对象的一些概念
2014/08/29 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
工作求职信
2014/07/04 职场文书
政风行风评议心得体会
2014/10/21 职场文书
浅谈Node的内存泄露问题
2022/05/06 NodeJs