JS实现生成会变大变小的圆环实例


Posted in Javascript onAugust 05, 2015

本文实例讲述了JS实现生成会变大变小的圆环。分享给大家供大家参考。具体如下:

这里使用javascript生成圆环,会变大变小,对于研究如何利用JavaScript生成动画效果,这是个很好的范例。

运行效果如下图所示:

JS实现生成会变大变小的圆环实例

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:2px; height:2px; position:absolute; background:red; left:150px; top:200px;}
div {width:3px; height:3px; position:absolute; background:black;}
</style>
<title>JS圆环</title>
<script type="text/javascript">
var n=30;
var r=100;
var a=true;
window.onload=function ()
{
 var oDiv1=document.getElementById('div1');
 var aDiv=[];
 var oDiv=null;
 var j=0;
 var i=0;
 for(i=0;i<n;i++)
 {
  oDiv=document.createElement('div');
  aDiv.push(oDiv);
  document.body.appendChild(oDiv);
 }
 calcDrg();
 function calcDrg()
 {
  for(i=0;i<n;i++)
  {
   var degress=360*i/n+j;
   var a=Math.sin(degress*Math.PI/180)*r;
   var b=Math.cos(degress*Math.PI/180)*r;
   aDiv[i].style.left=oDiv1.offsetLeft+b+'px';
   aDiv[i].style.top=oDiv1.offsetTop-a+'px';
  }
 }
 setInterval(function (){
  j++;
  var s=0.3;
  a?r-=s:r+=s;
  if(r<=0 || r>=100)
  {
   a=!a;
  }
  calcDrg();
 }, 10);
};
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>

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

Javascript 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
jquery键盘事件介绍
Jan 31 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 #Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 #Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 #Javascript
JS+CSS实现表格高亮的方法
Aug 05 #Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 #Javascript
JavaScript节点及列表操作实例小结
Aug 05 #Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 #Javascript
You might like
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
JavaScript内存管理介绍
2015/03/13 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
Python内置函数之filter map reduce介绍
2014/11/30 Python
介绍Python的Django框架中的QuerySets
2015/04/20 Python
Python 调用Java实例详解
2017/06/02 Python
python实现聚类算法原理
2018/02/12 Python
python中logging包的使用总结
2018/02/28 Python
python数据爬下来保存的位置
2020/02/17 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
企业总经理岗位职责
2014/02/13 职场文书
高中军训感言800字
2014/03/05 职场文书
党员自我对照检查材料
2014/08/19 职场文书
应届生简历自我评价
2015/03/11 职场文书
停课通知书
2015/04/24 职场文书
2015年班干部工作总结
2015/04/29 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
使用python绘制横竖条形图
2022/04/21 Python