JS实现生成会变大变小的圆环实例

本文实例讲述了JS实现生成会变大变小的圆环。分享给大家供大家参考。具体如下：

这里使用javascript生成圆环，会变大变小，对于研究如何利用JavaScript生成动画效果，这是个很好的范例。

运行效果如下图所示：

具体代码如下：

<!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程序设计有所帮助。

赞 (0)

相关推荐

  • 用JavaScript实现动画效果的方法

    其实原理是很简单的,主要是使用了一个计时器函数,下面我为大家演示一个简单的动画的制作过程,通过有关的介绍,大家可以举一反三,做出更多很炫的动画效果. 这个实例的效果是点击网页上的"开始移动"按钮,则其中的指定图层就会从左到右移动,在这个过程中你点击"停止移动"按钮就会停止移动. 复制代码 代码如下: <html> <head> <title>JavaScript Motion Sample</title> <sc

  • JavaScript实现动画打开半透明提示层的方法

    本文实例讲述了JavaScript实现动画打开半透明提示层的方法.分享给大家供大家参考.具体如下: <!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"&g

  • JavaScript生成福利彩票双色球号码

    福利彩票的双色球号码是由6个红球号码和1个篮球号码组成的,其中,6个红球号码是从01到33中随机抽出的6个数字,1个篮球号码是从01到16中随机抽出的1个数字.6个红球号码通常按照从小到大的顺序排列.下面是JavaScript中生成一注双色球号码的方法,供大家参考! var redBall = new Array(); var redLen = redBall.length; while(redLen<6){ var ball = ranNumber(1,33); var flag = true

  • JavaScript实现鼠标滑过处生成气泡的方法

    本文实例讲述了JavaScript实现鼠标滑过处生成气泡的方法.分享给大家供大家参考.具体实现方法如下: <HTML> <HEAD> <title>鼠标周围在网页上生成气泡</title> </HEAD> <BODY bgColor=#000000 scroll=no onload=zyva()> <div id=aqua style="position:absolute;left=0;top=0;">

  • JavaScript生成的动态下雨背景效果实现方法

    本文实例讲述了JavaScript生成的动态下雨背景效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <HTML> <HEAD> <TITLE>JavaScript生成的动态下雨背景效果</TITLE> </HEAD> <BODY bgcolor="#fef4d2" > <center> <script language=JavaScript> <!-- [

  • JavaScript随机生成信用卡卡号的方法

    本文实例讲述了JavaScript随机生成信用卡卡号的方法.分享给大家供大家参考.具体分析如下: 这段JS代码根据信用卡卡号产生规则随机生成信用卡卡号,是可以通过验证的,仅供学习参考,请不要用于非法用途,否则后果自负. var visaPrefixList = new Array( "4539", "4556", "4916", "4532", "4929", "40240071", &

  • javascript+html5实现绘制圆环的方法

    本文实例讲述了javascript+html5实现绘制圆环的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <title> </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body> <fiel

  • javascript转换静态图片，增加粒子动画效果

    使用getImageData接口获取图片的像素点,然后基于像素点实现动画效果,封装成一个简单的lib <!DOCTYPE html> <html> <head> <title>particle image</title> <meta charset="utf-8" /> <style> #logo { margin-left:20px; margin-top:20px; width:160px; hei

  • JS实现生成会变大变小的圆环实例

    JS实现生成会变大变小的圆环实例

    本文实例讲述了JS实现生成会变大变小的圆环.分享给大家供大家参考.具体如下: 这里使用javascript生成圆环,会变大变小,对于研究如何利用JavaScript生成动画效果,这是个很好的范例. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

  • 解决iView Table组件宽度只变大不变小的问题

    示例: <Table class="my-table"></Table> 打开开发者工具其实你可以发现iView给table标签的宽度加上了一个明确的宽度值,而且在父元素变小的时候这个值并没有相应地变小,所以才会导致的iView Table组件只会变大不会变小. 那么我们就可以根据这个原因才决定解决方案 1.给Table组件的table标签设置一个important的width .my-table table { width: 100% !important;

  • vue实现拖动左侧导航栏变大变小

    vue实现拖动左侧导航栏变大变小

    本文实例为大家分享了vue实现拖动左侧导航栏变大变小的具体代码,供大家参考,具体内容如下 <template>   <div>     <div class="top">顶部导航</div>     <div id="left">       <div id="menu">         <span>左侧侧边栏</span>       </d

  • c语言实现输入一组数自动从大到小排列的实例代码

    如下所示: #include <stdio.h> main() { int x; printf("请输入要排序数字个数:"); scanf("%d",&x); int i,j,k,a,b,num[x]; printf("输入数据:"); for(i=0;i<x;i++) scanf("%d",&num[i]); for(j=0;j<x;j++) { for(k=j+1;k<x;k+

  • JS实现网页表格自动变大缩小的方法

    本文实例讲述了JS实现网页表格自动变大缩小的方法.分享给大家供大家参考.具体分析如下: 这就是一个个性的动态表格效果代码,网页中的表格自动放大或者缩小,不停的变化 主要就是一个强调显示的作用 复制代码 代码如下: <HTML> <HEAD> <TITLE>js会动的表格</TITLE> <META content="text/html; charset=hz-gb-2312" http-equiv=Content-Type>

  • JavaScript通过mouseover()实现图片变大效果的示例

    实例如下所示: <!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> <meta http-equiv="

  • 解决使用mybatis-plus时,生成的SQL大写变小写加下划线问题

    在application.xml加上以下配置 mybatis-plus.configuration.map-underscore-to-camel-case=false 补充知识:mybatis中的大小写转义 在使用mybatis 时我们sql是写在xml 映射文件中,如果写的sql中有一些特殊的字符的话,在解析xml文件的时候会被转义,但我们不希望他被转义,所以我们要使用<![CDATA[ ]]>来解决. <![CDATA[ ]]> 是什么,这是XML语法. 在CDATA内部的所

  • 国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程

    国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程

    目录 1. 页面布局 2. 图片上传和展示 3. 初始化画布 4. 切换模板 5. 输出图片 这里用到的技术: HTML+ CSS+ JavaScript: download.js库: fabric.js库: 先上体验链接:g.cuggz.com/.​ 注:可以点击上方的连接进行使用,不过我的域名被TX屏蔽了,还在申诉中,所以无法在QQ.微信中打开,需要复制链接到浏览器进行查看.使用.​ 下面是这个小工具的截图: 1. 页面布局 这部分不多说,直接上代码: <div class="wrap

  • Android实现背景图滑动变大松开回弹效果

    Android实现背景图滑动变大松开回弹效果

    本文实例为大家分享了Android实现背景图滑动变大松开回弹的具体代码,供大家参考,具体内容如下 原图 放大后 1.自定义view继承ScrollView实现效果 public class HeadZoomScrollView extends ScrollView {     private View mZoomView;     private int mZoomViewWidth;     private int mZoomViewHeight;     private float firs

  • Android ListView实现下拉顶部图片变大效果

    本文实例为大家分享了Android ListView下拉顶部图片变大的具体代码,供大家参考,具体内容如下 在git上查看牛人的代码,发现是反编译别人的代码,还没加注释,代码也没有完全编译完整,所以这里我做的简单的注释,仅供学习. 变量说明 这里变量包含了:自定义返回动画加速度.自定义动画线程.头部图片view,最后的y坐标,做好的比例,做大的比例等. private static final String TAG = "PullToZoomListView"; private stat

随机推荐