直接上效果图:
然后是代码:
一共两种实现方式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style> .box { width: 200px; height:100px; background: #cccccc; position: absolute; top: 30%; left: 40%; transform-origin: 50% 50% 0; } </style> </head> <body> <div id="box" class="box"></div> <script> // 第一种 var isMove = false; $('#box').mousedown(function (event) { const element = event.target; const rect = element.getBoundingClientRect(); element.dataset.centerX = rect.left + rect.width / 2; element.dataset.centerY = rect.top + rect.height / 2; element.dataset.angle = getDragAngle(event); isMove = true; }); $('#box').mousemove(function (event) { if (isMove) { var angle = getDragAngle(event); event.target.style.transform = 'rotate(' + angle + 'rad)'; } }); $('#box').mouseup(function (event) { isMove = false; event.target.dataset.angle = getDragAngle(event); }); function getDragAngle(event) { var element = event.target; var startAngle = parseFloat(element.dataset.angle) || 0; var center = { x: parseFloat(element.dataset.centerX) || 0, y: parseFloat(element.dataset.centerY) || 0, }; var angle = Math.atan2(center.y - event.clientY, center.x - event.clientX); return angle - startAngle; } // 第二种 // $(document).on('mousemove',function(e){ // var x = e.clientX; // var y = e.clientY; // var origin = {x:950,y:190} // 先手动指定当前中心点,也可以根据当前元素的left+width/2 的到x top+height/2 得到y值 // // 计算出当前鼠标相对于元素中心点的坐标 // x = x - origin.x; // 因为x大于origin.x 是在y轴右边,直接减就行了 // y = origin.y - y;// 但是y如果要在x轴上方,它是比origin.y要小的,所以这里就需要反过来 // // 然后计算就可以了 // var ele = document.getElementById('box') // var deg = Math.atan2(y, x) / Math.PI * 180; // ele.style.transform = 'rotate('+ -deg +'deg)' // }); </script> </body> </html>