圆的运动-原生JS详解
来源:互联网 发布:海尔电视电视直播软件 编辑:程序博客网 时间:2024/06/08 15:23
接下来做一个简单的布局
<style type="text/css"> .box{ width: 200px; height: 200px; border: 1px solid #000; position: relative; left: 300px; top: 100px; border-radius:50% ; } .box span{ width: 30px; height: 30px; background: blue; position: absolute; left: 50%; top: 0; margin-left: -15px; margin-top: -15px; border-radius:50% ; }</style><body> <div class="box" id="box"> <span id="target"> </span> </div></body><script> window.onload=function(){ var oBox=document.getElementByID('box'); var oSpan=document.getElementByID('target'); var r=oBox.offsetWidth/2; //求圆的半径; var n=0; //将n当做角度,作为运动系数; var timer=null; timer=setInterval(function(){ n++; var oSpan.style.left=r+r*Math.sin(n*Math.PI/180)+'px'; //计算详解见顶部图2 var oSpan.style.top=r-r*Math.cos(n*Math.PI/180)+'px'; if(n==360){ clearInterval(timer); } },30) }</script>
0 0
- 圆的运动-原生JS详解
- 穿墙运动-原生JS详解
- 分块运动-原生JS详解
- 斜三角分块运动-原生JS详解
- 无线随机运动-原生JS详解
- 原生js螺旋运动
- js原生运动
- 原生JS 封装运动函数
- 原生JS实现运动效果
- 原生js实现带运动的分页效果
- 原生Js完美运动框架(缓冲运动和弹性运动)
- 【原生JS组件】javascript 运动框架
- 原生js实现时间版运动框架
- 原生js封装元素运动函数
- 用原生js封装运动框架
- 原生纯js完美缓冲运动轮播图
- 原生JS如何运动ajax封装函数
- 原生JS事件详解
- Jenkins 升级到2.42 Junit test report 出现错误的解决
- HDU1556:Color the ball(线段树区间更新)
- java基础六对象
- 【清明】莫队算法
- 1051. Pop Sequence
- 圆的运动-原生JS详解
- 神经网络进阶(连载1)为机器人提供知觉
- CCF201312-1 出现次数最多的数(100分)
- 搭建mm网站
- hdl 简单设计举例
- APUE--环境搭建
- c++求圆的面积和矩形的面积
- HTML标签之常见格式标签(1)
- 模块模式