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 UI CSS Framework开发Widget的经验
Aug 21 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
javascript不可用的问题探究
Oct 01 Javascript
js图片处理示例代码
May 12 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
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开发负载均衡指南
2010/07/17 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
php实现的用户查询类实例
2015/06/18 PHP
10个php函数实用却不常见
2015/10/13 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
Javascript window对象详解
2014/11/12 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
pytorch 模型可视化的例子
2019/08/17 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
行政管理人员精品工作推荐信
2013/11/04 职场文书
法律专业应届生自荐信范文
2014/01/06 职场文书
八年级音乐教学反思
2014/01/09 职场文书
结婚典礼证婚词
2014/01/11 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
2014年环保工作总结
2014/11/26 职场文书
运动会100米加油稿
2015/07/21 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python