js+css3实现鼠标控制图片旋转实现方向舵效果

本文链接：https://blog.csdn.net/leftfist/article/details/107375278

一、效果

效果如图，这是一个方向舵。用鼠标抓住外面的方向盘旋转，而里面的舵标识保持不动。
在这里插入图片描述

二、设计思路

1、目标由2张图片组成，利用CSS定位属性组合在一起
在这里插入图片描述

2、监听方向盘图片上的鼠标事件，当鼠标按下并且轨迹改变时，改变方向盘图片对应的CSS的transform属性值，实现其旋转

三、代码

html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="./thirty/windy/jquery-2.1.1.min.js"></script>
<style>
*{margin:0;padding:0;}
body{background-color:#000;}
p{color:#fff;text-align:center;}
</style>
<style>
	#helmContainer{
		position:relative;	
		width:200px;
		height:200px;
		margin:200px auto;
		margin-bottom:50px;
	}
	#helm{
		width:200px;
		height:200px;
	}
	#helm-inner{
		position:absolute;
		left:55px;
		top:55px;
		width:90px;
		height:90px;
	}
</style>
<title>demo</title>
</head>
<body>
<div>
	<div id="helmContainer">
		<!-- 方向盘 -->
		<img id="helm" src="./images/compass-outer.svg" />
		<!-- 方向舵标识 -->
		<img id="helm-inner" src="./images/compass-inner.svg" />
	</div>
	<p>准备就绪</p>
</div>
</body>
</html>

$(function(){
	var cx,cy;//方向盘圆心
	var x0,y0;//y轴的正半轴（正北方向）与圆周相交点
	var angle0;//鼠标抓点角度（正北方向为0度，顺时针起算）
	var angleOffset = 0;//方向盘当前的偏移角度，初始值是0
	var angle;//旋转角度
	var bCtrl = false;
	
	init();
	
	$("#helm").mousedown(function(ev){
		if(ev.which == 1){//按下的是鼠标左键
		    var oEvent = ev; 
			oEvent.preventDefault();// 浏览器有一些图片的默认事件,这里要阻止
			angle0 = getAngle(ev.pageX,ev.pageY);
			showInfo(ev,0);
			bCtrl = true;
		}
	});
	$(document).mouseup(function(ev){//鼠标放开即停止
		stop();
	});	
	$("#helm").mouseout(function(ev){//鼠标离开方向盘图片也停止
		stop();
	});
	$("#helm").mousemove(function(ev){
		if(bCtrl == true){
			angle = roate(ev);
			$("#helm").css("transform","rotate(" + (angle + angleOffset) + "deg)");
			showInfo(ev,angle);
		}
	});
	
	function init(){
		var center = getCenter();
		cx = center.cx;
		cy = center.cy;
		
		x0 = cx;
		y0 = $('#helm').offset().top;
		
		angleOffset = 0;
		angle = 0;
		
		showInfo();
	}
	function stop(){
		if(bCtrl == true){
			bCtrl = false;
			angleOffset += angle;//刷新方向盘已旋转角度
			showInfo();
		}
	}
	function showInfo(){
		$("p").text("原偏移角度：" + angleOffset + ";旋转角度：" + angle);
	}
	function roate(ev){//旋转角度，即当前坐标点与鼠标按下左键时的抓点的夹角
		var angle2 = getAngle(ev.pageX, ev.pageY);
		return angle2 - angle0;
	}
	function getCenter(){//获取方向盘圆心坐标
		var offset = $('#helm').offset();
		var width = $('#helm').width();
		var height = $('#helm').height();
		var cx = offset.left + width / 2;
		var cy = offset.top + height / 2;
		return {cx:cx,cy:cy};
	}
	function getAngle(x,y){//指定坐标点与正北方向的夹角
		//圆周上任意2点之间的弧度公式：θ=arctan[(y2-y0)/(x2-x0)]-arctan[(y1-y0)/(x1-x0)]
		var radian1 = Math.atan((y - cy)/(x - cx));//指定坐标点弧度
		var radian0 = 0;//正北方向弧度
		var angle = (radian1 - radian0) * 180 / Math.PI;//弧度转角度
		if(x < cx){//指定坐标点落在第3、4象限，
			angle += 180;
		}
		return angle;
	}
});