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 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
PHP下10件你也许并不了解的事情
2008/09/11 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
微信支付开发告警通知实例
2016/07/12 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
python保存二维数组到txt文件中的方法
2018/11/15 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
基于python的列表list和集合set操作
2019/11/24 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
python实现udp聊天窗口
2020/03/31 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
飞利浦法国官网:Philips法国
2019/07/10 全球购物
英文版销售经理个人求职信
2013/11/20 职场文书
家居设计专业个人自荐信范文
2013/11/26 职场文书
正规的求职信范文分享
2013/12/11 职场文书
教师党性分析材料
2014/02/04 职场文书
文体活动实施方案
2014/03/27 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
考试作弊检讨
2015/01/27 职场文书
国富论读书笔记
2015/06/26 职场文书
公司会议开幕词
2016/03/03 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js