Я пытался вращать колесо плавно. Я справился с частью поворота, но есть еще несколько вещей, которые я с трудом пытаюсь набрать asp.
1) значение степени в приведенном ниже коде будет от 0 до 225, тогда оно перейти к отрицательному значению внезапно, а не завершить полное значение 360 градусов.
2) начальная точка вращения привязывается к первой точке контакта. например, если вы начнете вращать это колесо, коснувшись левой нижней части колеса, вы увидите, что текстовое значение поворачивается почти до 90 одновременно. Как это можно сделать?
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
></script>
<style>
body {
display: flex;
justify-content: center;
}
#target {
margin-top: 100px;
width:300px;
height:300px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 100;
font-size: 40px;
color: #777;
-webkit-font-smoothing: antialiased;
}
#target:hover {
color: orange;
cursor: pointer;
}
</style>
</head>
<body>
<div id="target">
<img src="https://www.freepngimg.com/thumb/car%20wheel/5-car-wheel-png-image-download-thumb.png" style="width:300px;height: 300px;">
<span id="text">text1</span>
</div>
<script src="rotate.js"></script>
</body>
</html>
Js
var temp = 0,start = 0;
$(document).ready(function(){
var isDragging = false;
$("#target").mousemove(function(e){
if(isDragging){
e.preventDefault();
var element = document.getElementById("target");
var mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft;
var mouseY = e.pageY || e.clientY + document.documentElement.scrollTop;
var rect = element.getBoundingClientRect();
console.log(rect.top, rect.left, rect.bottom, rect.right);
var s_rad = Math.atan2(
mouseY - rect.top - rect.height / 2,
mouseX - rect.left - rect.width / 2
);
var degree = Math.round(45+ (s_rad * (180 / (Math.PI))) ) ;
degree = degree+5;
if(degree%5==0 && temp != degree){
if(start == 0 || (start/360 == 0)){
start = degree;
}
temp = degree;
console.log('Degree',degree,s_rad);
element.style.transform = 'rotate(' + degree + 'deg)';
console.log("Rotation is of ", degree-start+" degrees");
}
}
});
$("#target").mousedown(function(){
isDragging = true;
});
$("*").mouseup(function(){
isDragging = false;
});
});
Ссылка Codepen