原生js 写 鼠标的圆周运动

实现 鼠标点击太阳绕着圈圈转 

 html 

<div id="wrap">
		<div class="positionWrap">
			
		</div>
		<div class="circle">
			
		</div>
		<div class="sunLight">
			<img src="./image/sunActive.png" alt="">
		</div>
</div>

css

<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#wrap{
			width:100px;
			height:100px;
			margin:200px auto;
			position:relative;
		}
		.circle{
			width:100px;
			height:100px;
			border-radius:50%;
			border: 1px solid #0ff;
		}
		.sunLight{
		    position:absolute;
			background-size:cover;
			width:20px;
            height:20px;
			margin-left:42px;
			margin-top:92px;
			transform: rotate(200deg);
			transform-origin: 50% -200%;
			left:0;
			top:0;
			cursor: pointer;
		}
	</style>

js 

var offsetAngle ;
	$(".sunLight").mouseenter(function(){
		
	})
	$(".sunLight").mousedown(function(evt){
		evt.preventDefault && evt.preventDefault();
        evt.stopPropagation && evt.stopPropagation();
		document.onmousemove = onMouseMoveEvent;
        document.onmouseup = onMouseUpEvent;
	})
	function getAngle(px, py, mx, my){
		//获得旋转中心和鼠标坐标连线，与y轴正半轴之间的夹角
        var x = Math.abs(px - mx);
        var y = Math.abs(py - my);
        var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
        var cos = y / z;
        var radina = Math.acos(cos);//用反三角函数求弧度
        var angle = Math.floor(180 / (Math.PI / radina));//将弧度转换成角度

        if (mx > px && my > py) {//鼠标在第四象限
            angle = 180 - angle;
        }
        if (mx == px && my > py) {//鼠标在y轴负方向上
            angle = 180;
        }
        if (mx > px && my == py) {//鼠标在x轴正方向上
            angle = 90;
        }
        if (mx < px && my > py) {//鼠标在第三象限
            angle = 180 + angle;
        }
        if (mx < px && my == py) {//鼠标在x轴负方向
            angle = 270;
        }
        if (mx < px && my < py) {//鼠标在第二象限
            angle = 360 - angle;
        }
        return angle;
	}
	function onMouseMoveEvent(evt){
      // 移动鼠标
      let event = evt || window.event;
      let currentCircle = $("#wrap");
      let offsetX = currentCircle.offset().left;
      let offsetY = currentCircle.offset().top;
      let  mouseX = event.pageX - offsetX;
      let  mouseY = event.pageY - offsetY;
      offsetAngle = getAngle(100, 100, mouseX, mouseY) - 180;
      // heightAngle = this.getAngle(52, 40, mouseX, mouseY) -180;
      if( offsetAngle >= -180 && offsetAngle < -90 ){
          offsetAngle = offsetAngle + 360;
      }else if(offsetAngle >= 270){
         offsetAngle = -90
      }
	  $(".sunLight").css({
		  "transform" : "rotate(" + offsetAngle + "deg)",
		  "-webkit-transform" : "rotate(" + offsetAngle + "deg)",
		  "-moz-transform" : "rotate(" + offsetAngle + "deg)" ,
		  "-ms-transform" : "rotate(" + offsetAngle + "deg)",
		  "-o-transform" : "rotate(" + offsetAngle + "deg)"
	  })

	}
	function  onMouseUpEvent(){
      //  松开鼠标
        document.onmousemove = null;
        document.onmouseup = function () {
            document.onmousemove = null;
            $(".sunLight").onmousedown = null;
        }
    }

 如果需要做成 那种滑到哪对应的那一边的圈圈填充别的颜色 可以用svg 来写  

菜鸟 不能太懒...... 恩恩