前端常用效果（1）循环的圆-白红宇

循环的圆

先上效果, 代码引用了jquery的框架来获取dom对象复制代码

html代码如下

外层是个div设置相对定位，里面包含2个div，一个是底圆，另一个是小圆点

css代码如下

.show-content{    position: relative}.cricle-orbital{    height: 100px;    width: 100px;    border:1px solid #3f80f5;    border-radius: 50%}.cricle-slider{    position: absolute;    background: #60f6bf;    height: 10px;    width: 10px;    border-radius: 50% 50%;}复制代码

js代码如下

setInterval('cricleAuto()', 10);                                       //调用方法，10毫秒是旋转速度 var cricleNum=0;function cricleAuto() {        	if(cricleNum == 360) {                                 //角度为360，也就是一圈后回复        		cricleNum = 0;        	}        	cricleNum++;        	var a = Math.sin(cricleNum * 2*Math.PI / 360) * 50;     //算出位置在y轴的偏差，50是底圆半径        	var b = Math.cos(cricleNum * 2*Math.PI / 360) * 50;     //算出位置在x轴的偏差，50是底圆半径        	$('.cricle-slider').css('left', 45 + b);                //设置位置，45是底圆半径50-小圆点半径5得到        	$('.cricle-slider').css('top', 45 + a);                 //设置位置，45是底圆半径50-小圆点半径5得到            }复制代码

在线地址

第一次写，写的不好的地方请多多包涵，以后会慢慢的添加一些前端常使用效果，希望能给入门级的前端作为练手和开阔自己的思维。