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 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
JS实现多功能计算器
Oct 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
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
php使用GeoIP库实例
2014/06/27 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
Python进行数据科学工作的简单入门教程
2015/04/01 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
企业内控岗位的职责
2014/02/07 职场文书
股份合作协议书范本
2014/04/14 职场文书
法定代表人资格证明书
2015/06/18 职场文书
初级职称评定工作总结
2015/08/13 职场文书
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL