绕圆心旋转:
- ;(function(){
- var dot = document.querySelector(‘.dot’);
- var debug = document.querySelector(‘.debug’)
- var parent =dot.parentNode;
- var _event = ‘ontouchstart’ in document.documentElement;
- var start =_event ? ‘touchstart’ : ‘mousedown’;
- var move = _event ? ‘touchmove’ : ‘mousemove’;
- var end = _event ? ‘touchend’ : ‘mouseup’;
- dot.addEventListener(start, eventDown);
- var angle,delta_y,delta_x;
- function eventDown(e){
- mousedown = true;
- (_event ? dot : document).addEventListener(move, eventMove);
- (_event ? dot : document).addEventListener(end,eventUp );
- return;
- };
- function eventMove(e){
- if(mousedown){
- if(e.changedTouches){
- e = e.touches[0];
- };
- var st = document.documentElement.scrollTop || document.body.scrollTop;
- document.title = parent.getBoundingClientRect().top+st
- delta_x = (parent.offsetWidth / 2 + parent.getBoundingClientRect().left) – e.pageX ;
- delta_y = (parent.offsetHeight / 2 + parent.getBoundingClientRect().top)+st – e.pageY;
- angle = Math.atan2(delta_y, delta_x) * (180 / Math.PI);
- angle –= 90;
- if(angle < 0){
- angle = 360 + angle;
- };
- angle = Math.round(angle);
- dot.style.transform = ‘rotate(‘ + angle + ‘deg)’;
- debug.innerHTML = angle + ‘deg’;
- };
- };
- function eventUp(e){
- (_event ? dot : document).removeEventListener(move, eventMove);
- (_event ? dot : document).removeEventListener(end,eventUp );
- mousedown=false;
- };
- })();