太极旋转-JS实现

  刚学了js的一些函数,所以做了一个太极的旋转。做完之后是上面这个样子的,是可以旋转的。

  思路:

  1.先做一个基准转盘,之后将元素都放在转盘上,跟随转盘动。

  2.画两个半圆,主要属性是border-top-right-radius: 250px; 像素值为长边的一半。

  3.然后画4个圆,以基准转盘为父元素,按照下面黑色圆一样的思路再画另外一边白色的圆,最后再在两个中等的圆上画两个小圆。

  4.设置定时器:

//旋转角度
var deg = 0

//设置定时器,100毫秒动一次
var tid = setInterval(function(){
    var clock_dfc = document.getElementById("clock-dfc");

    clock_dfc.style.transform = "rotate("+(-deg)+"deg)"; //改变转盘属性
    deg -=30;//每次赚30度
},100);

  5.小结:就是简单的CSS叠加出来的效果。

  代码分享:http://download.csdn.net/detail/qq_15259489/9705046

时间: 2024-11-08 21:45:15

太极旋转-JS实现的相关文章

图片旋转js代码

function rotateImage(imgId) { imageToRotate = document.getElementById(imgId); imageToRotate.style.filter= "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')"; rotate(); } var imageToRotate; var degreeToRotate=0; function rotat

wap版和pc版的旋转js

<script type="text/javascript"> var evt = "onorientationchange" in window ? "orientationchange" : "resize"; window.addEventListener(evt, function() { alert("屏幕旋转"); }, false); </script> wap版和pc

鼠标拖拽旋转js

相信大家都见过这种情况,在ppt或word中,有个文本框,选中后,在上方会出现一个旋转的图标(如下图),拖动此图标时会旋转,那么这个角度该怎么计算? 我是这样算的,以图形中心为圆心(O),从圆心出发的y轴为边(OA),以鼠标当前位置与圆心连线(OB) , 计算BOA的角度. tg BOA = (OB_x-O_x)/(OB_y - O_y)根据值算出角度,正值为顺时针,负值为逆时针 当然还要根据B点相对O点所处的象限来计算具体的角度值 在JS中的操作: 假如画布坐标为(x,y)(如果界面比较复杂,

当今最流行的Node.js应用开发框架简介

快速开发而又容易扩展,高性能且鲁棒性强.Node.js的出现让所有网络应用开发者的这些梦想成为现实.但是,有如其他新的开发语言技术一样,从头开始使用Node.js的最基本功能来编写代码构建应用是一个非常划不来的耗时的事情.这个问题的解决方案非常简单且已经经受起时间的考验:使用一个已经提前打造好的开发框架.因此才会有如此多的如Express.js,Koa,Sails.js等框架的概念提出来并加以实现. 这些开发框架的角色非常简单.就是要去为应用开发人员节省时间,让我们不用话费太多精力在一些不必要的

太晚睡觉等于自杀,你晚上一般什么时候睡觉?

任何试图更改生物钟的行为,都将给身体留下莫名其妙的疾病,20.30年之后再后悔,已经来不及了. 一.晚上9-11点为免疫系统(淋巴)排毒时间,此段时间应安静或听音乐 . 二.晚间11-凌晨1点,肝的排毒,需在熟睡中进行. 三.凌晨1-3点,胆的排毒,亦同. 四.凌晨3-5点,肺的排毒.此即为何咳嗽的人在这段时间咳得最剧烈,因排毒动作已走到肺:不应Medicine,以免抑制废积物的排除. 五.凌晨5-7点,大肠的排毒,应上厕所排便. 六.凌晨7-9点,小肠大量吸收营养的时段,应吃早餐.疗病者最好早

使用CSS3生成一个会旋转的太极八卦图

学习了CSS3 后,可以做出很多炫酷的效果,但是基本功需要打扎实,就从学习使用纯CSS技术生成太极八卦图学起. 第一步,先使用HTML进行一下简单的布局,如下,只需要一个DIV即可: <body> <div></div> </body> 第二步,插入了DIV之后, 就需要为其添加样式,以及设置其为圆形,我们宽要设置的是高的2倍,这样在为底边框添加了宽度后,保证DIV出来后是圆形,如下: div { width:500px; height:250px; bor

P2.JS之旋转约束(RevoluteConstraint)备忘

作用:物体可以绕着所设置的锚点作旋转运动.用途:车轮. 先上段代码: 1 var r1 = new p2.RevoluteConstraint (holderBody, circleBody, { 2 worldPivot : [0, 5] 3 //localPivotA: [1, -1], 4 //localPivotB: [0, 0] 5 }); 6 r1.enableMotor() ; 7 r1.setMotorSpeed( 5); 8 world.addConstraint(r1) ;

JS跟随鼠标旋转的图片

<html> <head> <title>JS跟随鼠标旋转的图片丨Daniel wellington</title> <script> <!-- Beginning of JavaScript - var x,y var step=5 var flag=1 var pause var timersmall var timerbig var isbigcircle=1 var pause=50 var bigradius var smallr

js图片旋转

<script type="text/javascript" language="javascript"> function rotate(id, angle, whence) { var p = document.getElementById(id); if (!whence) { p.angle = ((p.angle == undefined ? 0 : p.angle) + angle) % 360; } else { p.angle = ang