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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
VUE多层路由嵌套实现代码
May 15 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
微信小程序动态添加和删除组件的现实
Feb 28 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
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实现查询两个数组中不同元素的方法
2016/02/23 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
vue实现登录拦截
2020/06/29 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现最常见加密方式详解
2019/07/13 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
开学典礼感言
2014/02/16 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
精神病医院见习报告
2014/11/03 职场文书
Linux磁盘管理方法介绍
2022/06/01 Servers