一、效果
效果如图，这是一个方向舵。用鼠标抓住外面的方向盘旋转，而里面的舵标识保持不动。
二、设计思路
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>
js
$(function(){var cx,cy;//方向盘圆心var x0,y0;//y轴的正半轴（正北方向）与圆周相交点var angle0;//鼠标抓点角度（正北方向为0度，顺时针起算）var angleOffset = 0;//方向盘当前的偏移角度，初始值是0var 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;}});
