iTakeo

随手记：旋转按钮。

绕圆心旋转：

;(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;
};
})();

0deg

2015/09/25 1 /

标签: 暂无标签