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 相关文章推荐
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
jquery提示效果实例分析
Nov 25 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
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脚本的10个技巧(2)
2006/10/09 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
JS制作手机端自适应缩放显示
2015/06/11 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
简述数据库的设计过程
2015/06/22 面试题
工程业务员工作职责
2013/12/07 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
党校学习党性分析材料
2014/12/19 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
工作证明格式范文
2015/06/15 职场文书
培根随笔读书笔记
2015/07/01 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python