//009__circle-seekbar
//鼠标圆形 拽
// <div id='app'>
// <div class="container">
// <div class="circle">0</div>
// <!-- 小红点绕圆转动 百分比 -->
// <div class="circle-bar"></div>
// <!-- 小红点 -->
// </div>
// </div>
; (function (w, doc) {
const oBox = doc.querySelector('.container');
const oCircle = oBox.querySelector('.circle');
const oBar = doc.querySelector('.circle-bar');
const oCircleHalfR = 320 / 2;
const oCircleBorder = 10;
const oBarHalfR = 30 / 2;
function init() {
let isDrag = false;
let mouse_offset = {
x: 0,
y: 0
}
oBar.addEventListener('mousedown', e => {
isDrag = true;
mouse_offset = getMouseOffset(e)
}, false)
w.addEventListener('mousemove', e => {
if (!isDrag) {
return
}
mouse_offset = getMouseOffset(e)
const radian = Math.atan2(mouse_offset.y, mouse_offset.x);
const r = (oCircleHalfR - oCircleBorder / 2);
const x = Math.cos(radian) * r;
const y = Math.sin(radian) * r;
oBar.style.left = oCircleHalfR + x - oBarHalfR + 'px';
oBar.style.top = oCircleHalfR - (y + oBarHalfR) + 'px';
updateContent(radian)
}, false)
w.addEventListener('mouseup', e => {
isDrag = false
}, false)
function updateContent(radian) {
let angle = radian * (180 / Math.PI);
console.log(angle);
if (angle >= -180 && angle < 90) {
angle = 90 - angle;
} else {
angle = 360 - (angle - 90)
}
oCircle.textContent = Math.floor(angle)
}
function getMouseOffset(e) {
const mouse_offsetX = e.clientX - oBox.offsetLeft - oCircleHalfR;
const mouse_offsetY = - (e.clientY - oBox.offsetTop - oCircleHalfR);
return {
x: mouse_offsetX,
y: mouse_offsetY
}
}
}
init()
})(window, document)
小红点绕圆转动 百分比
最新推荐文章于 2024-07-09 09:38:47 发布