移动端转盘指针触摸旋转

如果想让一个元素一端固定，然后绕固定的点自动旋转比较容易，但是如果想要用手指控制旋转则就需要考虑偏转这角度的问题了。
话不多说，先上代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="content-type" content="text/html;charset=gb2312" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>移动端转盘指针触摸旋转</title>
		<style>
			*{margin: 0;padding: 0;text-decoration: none;opacity:1;}
			h3,h4,h5,h6,i,b,span,strong,a{font-weight:normal;font-style: normal;}
			a{color:black;}
			.clear{clear: both;}
			html,body{width:100%;height:100%;font-family: "微软雅黑";background:#f9f9f9;overflow:hidden;}
			input[placeholder]{color:#333;}
			input::-webkit-input-placeholder{color:#333;}
			#box{width:10rem;height:10rem;border:1px solid #ccc;border-radius:5rem;margin:0 auto;margin-top:2rem;position:relative;}
			#zhen_box{background:#ff6300;width:0.3rem;height:5rem;position:absolute;left:4.85rem;top:0;-webkit-transform-origin:0 100%;}
			
		</style>
	</head>
	<body>
		<p>将页面切换为移动端模式使用</p>
		<div id="box">
			<div id="zhen_box" style="transform: rotate(0deg);"></div>
		</div>
	</body>
	<script>
		//调节字体以及刷新
		(function (doc, win){
		  var docEl = doc.documentElement,
			resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
			recalc = function(){
			  var clientWidth = docEl.clientWidth;
			  if (!clientWidth) return;
			  //docEl.style.fontSize = parseInt(20 * (clientWidth / 320))+ 'px';
			  docEl.style.fontSize='20px';
			};
		  if (!doc.addEventListener) return;
		  win.addEventListener(resizeEvt, recalc,false);
		  doc.addEventListener('DOMContentLoaded',recalc,false);
		})(document, window);
		//end
		//圆心坐标
		//var circle_centerx=160;
		//var circle_centery=140;
		var ele_zhen=document.getElementById('zhen_box');//获取指针元素
		//触摸事件
		function touches(e){
				var ev= window.event||event;
				switch(ev.type){
	                case 'touchstart':
	                		var oy=ev.touches[0].clientY;
	                		var ox=ev.touches[0].clientX;
	                		console.log(ox+','+oy);
	                		document.getElementById('box').addEventListener('touchmove',touches,false);
	                    break;
	                case 'touchend':
						document.getElementById('box').removeEventListener('touchmove',touches,false);
						document.getElementById('box').removeEventListener('touchend',touches,false);
	                    break;
	                case 'touchmove': 
	                  	getAngle(ev.changedTouches[0].clientX,ev.changedTouches[0].clientY);
	                    break;
	            }
	            
	    }
		document.getElementById('zhen_box').addEventListener('touchstart',touches,false);
		
		
		function getAngle(mx,my){//获取鼠标的坐标
	        var px=160;
	        var py=140;
	        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;
	        }
			ele_zhen.style.transform="rotate("+angle+"deg)";
	        //return angle;
	    }
	</script>
</html>
以上代码没有用到任何框架，可以直接使用。
demo效果图：
线上demo体验：点击打开链接
移动端转盘指针触摸旋转

猜你喜欢
