利用javascript实现在圆周上匀速划动的动画效果
先看下效果：
圆心下的那个那个白圈的位置是光圈的起始位置，光圈所在的位置为终点位置。光圈从起始位置开始，沿着圆的轮廓匀速到终点位置。
在支持css3的情况下，可以利用css3做旋转效果来达到这种效果。具体思路为：
1）将光圈相对于圆进行绝对定位，设置光圈的绝对位置为上面所说的终点位置；
2）对圆设置一个旋转角度，如：transform: rotate(130deg)，此时，光圈也会改变位置，光圈旋转后的位置为上面所说的起点位置。
3）然后对圆设置transition，如：transition: transform .6s ease-out;这样会在0.6s内将光圈从起点位置旋转到终点位置。
在不支持css3的情况下，如IE9及IE9以下的浏览器，我使用的是javascript实现。具体思路为：
1）对圆心进行相对定位，对光圈进行绝对定位，设置圆的起始位置（在圆心的正下方）
2）以圆心为中心点，光圈的起始位置可以看做是-90读的地方，现在要将光圈从-90度到45度。做法就是通过不断的改变角度，从-90到45（这里需要使用定时器），根据每次的角度和圆的半径，首先获取弧度，再根据js中的Math对象的sin()和cos()获取光圈的x,y坐标（相对与圆心）。
3）根据每次得到的x,y坐标计算光圈的left,top值。由于角度是慢慢改变的，因此呈现的效果就是光圈从-90度到45度匀速划动。
实现的代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rotate</title>
<style>
#box{
width: 80px;
height: 80px;
background-color: limegreen;
border-radius: 50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
padding-top: 1px;
} #box .circle-dot{
position: relative;
margin-top: 39px;
margin-left: 40px;
width: 1px;
height: 1px;
} #box .circle-dot #light{
position: absolute;
width: 30px;
height: 30px;
background:url(images/light.png) no-repeat;
left: -15px;
top: 25px;
}
</style>
</head>
<body>
<div id="box">
<div class="circle-dot">
<dev id="light"></dev>
</div>
</div>
<script>
window.onload=function(){
var light = document.getElementById("light");
var circle = document.getElementById("box");
rotate(light,circle);
//js控制光圈划动
function rotate(ele,circle){
var r = circle.clientWidth/2;
var rotate = -91;
var timer = setInterval(step,10);
function step(){
rotate += 3;
var a = 2*Math.PI/360*rotate;
if(rotate == 44){
clearInterval(timer);
}
var x = r * Math.cos(a)-15; //光圈宽高为30，减去15是让光圈的中心在圆周上
var y = -r * Math.sin(a)-15;
ele.style.left=x+"px";
ele.style.top=y+"px";
}
}
}
</script>
</body>
</html>
利用javascript实现在圆周上匀速划动的动画效果的更多相关文章
- [ASP.NET] 如何利用Javascript分割檔案上傳至後端合併
最近研究了一下如何利用javascript進行檔案分割上傳並且透過後端.特地記錄一下相關的用法 先寫限制跟本篇的一些陷阱 1．就是瀏覽器的支援了 因為本篇有用到blob跟webworker 在ie中需 ...
- 利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
原文地址 http://www.jb51.net/article/33640.htm 在通过Javascript实现客户端和服务端的交互时,有时候需要对操作系统进行判断,以便实现不同操作系统下的兼容性 ...
- 利用javascript和WebGL绘制地球 【翻译】
利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...
- JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...
- GitHub Android 最火开源项目Top20 GitHub 上的开源项目不胜枚举，越来越多的开源项目正在迁移到GitHub平台上。基于不要重复造轮子的原则，了解当下比较流行的Android与iOS开源项目很是必要。利用这些项目，有时能够让你达到事半功倍的效果。
1. ActionBarSherlock(推荐) ActionBarSherlock应该算得上是GitHub上最火的Android开源项目了,它是一个独立的库,通过一个API和主题,开发者就可以很方便 ...
- 如何利用express新建项目（上）
如何利用express新建项目(上) 摘要 这篇文章将讲解了如何快速利用express新建项目 一.express4.x的安装 1. npm install -g express 2. npm ins ...
- ASP利用xhEditor编辑器实现图片上传的功能。
本人这几天在做一个软件,无意中用到xhEditor在线编辑器,这个编辑器虽然看着比较简单,但功能非常强大,大家可以去官网上查看,废话不说了. 这篇文件主要是实现在ASP环境中利用xhEditor编辑器 ...
- (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能
利用JavaScript(JS)实现一个九宫格拖拽功能 Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...
- JS控制语句 编程练习 学生数据，分别是姓名、性别、年龄和年级，接下来呢，我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦。
编程练习 在一个大学的编程选修课班里,我们得到了一组参加该班级的学生数据,分别是姓名.性别.年龄和年级,接下来呢,我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦. 学生信息如下 ...
随机推荐
- 【JavaScript】两种常见JS面向对象写法
基于构造函数 function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = function() { ...
- (1) zabbix进程构成
进程介绍 zabbix_agentd客户端守护进程,此进程收集客户端数据,例如cpu负载.内存.硬盘使用情况等 zabbix_getzabbix工具,单独使用的命令,通常在server或者proxy端 ...
- Centos6.9 搭建rsync服务端与客户端 案例：全网备份项目
rsync的企业工作场景说明 1)定时备份 1.1生产场景集群架构服务器备份方案项目 借助cron+rsync把所有客户服务器数据同步到备份服务器 2)实时复制 本地数据传输模式(local-only ...
- Python Cookbook3 Python进阶教程 http://python3-cookbook.readthedocs.io/zh_CN/latest/copyright.html
http://python3-cookbook.readthedocs.io/zh_CN/latest/copyright.html
- Python9-继承1-day24（大年初一）
#面向对象编程:'''思想:角色的抽象,创建类,创建角色,面对对象的关键字class 类名: 静态属性 = ‘aaa' def __init__(self):pass 类名.静态属性 ———存储在类的 ...
- cs229_part7
PCA 问题背景 回顾一下我们特征选择中的问题.如果特征非常多,而且有一些特征是重复的,那么我们可以想办法剔除掉一些无用的特征.那里我们提到一个计算互信息的方法.那么这里换一种降维方法. 比如说这样的 ...
- 163 AJAX
// 163 AJAX Tab // update 2006.10.18 // 增加鼠标延迟感应特性. // update 2006.10.8 // A 标签 href 属性将保持原有HTML功能.增 ...
- Java-使用哈希码比较对象的值
在一些特殊的情况下使用 package com.tj; import java.io.File; public class MyHash { public static void main(Strin ...
- json分享
JSON是什么? JavaScript Object Notation (JSON) is a text format for the serialization of structured data ...
- 六 、harbor使用
1 登录harbor docker login 10.1.2.6 2 打上标签 docker tag e3a875d407cf 10.1.2.6/library/ctf3:xss01 3 push到h ...