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 相关文章推荐
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
javascript判断非数字的简单例子
Jul 18 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
swiper实现异形轮播效果
Nov 28 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
MyEclipse常用配置图文教程
2014/09/11 PHP
smarty缓存用法分析
2014/12/16 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
PHP进程通信基础之信号
2017/02/19 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python的Django框架中的Context使用
2015/07/15 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
新闻传媒系求职信范文
2014/04/19 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
灵山大佛导游词
2015/02/04 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript