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

柔情只为你懂 2023-02-26 15:23 132阅读 0赞

## 一、效果 ##

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

## 二、设计思路 ##

1、目标由2张图片组成，利用CSS定位属性组合在一起  
![在这里插入图片描述][20200716090041790.png]  
![在这里插入图片描述][20200716090041547.png]  
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;
    	}
    });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/202007160857575.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70 1]: /images/20230209/12ae49eb3ced4cf4a78d23a3d48e981f.png
[20200716090041790.png]: /images/20230209/02c4c2eeb99c4d6cacb3bb7d28693b3d.png
[20200716090041547.png]: /images/20230209/e47c348f9144495785342ba48b591cf8.png