#javascript #jquery
#язык JavaScript #jquery
Вопрос:
Я пытаюсь переместить картинку в 3d. Когда я пройду половину картинки, смещение мыши должно быть положительным, но в остальном должно быть увеличено отрицательным образом. Как я могу сделать это для получения степени поворота?
Мой эксперимент похож на этот:
$('#img').mousemove(function (event) { $(this).removeClass('transition-effect'); let mouseX = event.offsetX; let itemWidth = $(this).width(); let degree = (10 * mouseX) / itemWidth;// For maximize to 10 degree let negativeDegree = -((10 * mouseX) / itemWidth);// For get a negative degree if (mouseX gt;= itemWidth/2) { // console.log(`itemWidth:${itemWidth/2} - mouseX:${mouseX}`); $(this).css('transform', 'perspective(1000px) rotateY(' degree 'deg)'); $(this).css('box-shadow', '' degree 'px 0px 20px #fbe989'); }else{ $(this).css('transform', 'perspective(1000px) rotateY(' negativeDegree 'deg)'); $(this).css('box-shadow', '' negativeDegree 'px 0px 20px #fbe989'); } }).mouseleave(function () { $(this).addClass('transition-effect'); $(this).css('box-shadow', '1px 0px 20px #c1c1c1'); $(this).css('transform', 'perspective(0) rotateY(0deg)'); }) .transition-effect{ transition: all 0.5s ease-in-out; } lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;img src="https://www.cumhuriyet.com.tr/Archive/2021/8/3/1857648/kapak_173121.jpg" class="img-fluid img-thumbnail take-it" id="img"gt; Комментарии:
1. Можете ли вы опубликовать остальную часть кода, изображение и т. Д.?
2. я публикую это @ComputersEnthusiast
3. Конечно, извините за плохой английский, я надеюсь, вы это понимаете @ComputersEnthusiast
4. Это похоже на решение моей проблемы, спасибо за вашу помощь. Но, похоже, я не могу отметить это раньше, чем через 15 очков. Я приду сюда после того, как получу твою отметку 🙂
Ответ №1:
Проблема заключалась в том, что слева у вас было mouseX = 0, поэтому в этот момент вы должны вычислить mouseX — расстояние (так, ширина изображения mouseX / 2, например, -200), затем преобразовать его в положительное значение для угла и добавить — к степени.
$('#img').mousemove(function (event) { $(this).removeClass('transition-effect'); let mouseX = event.offsetX; let itemWidth = $(this).width(); let half = itemWidth / 2; let degree = mouseX gt;= half ? ((10 * mouseX) / itemWidth) : (((-(mouseX - itemWidth)) * 10)/itemWidth); let negativeDegree = -((10 * mouseX) / itemWidth);// For get a negative degree if (mouseX gt;= half) { // console.log(`itemWidth:${itemWidth/2} - mouseX:${mouseX}`); $(this).css('transform', 'perspective(1000px) rotateY(' degree 'deg)'); $(this).css('box-shadow', '' degree 'px 0px 20px #fbe989'); }else{ $(this).css('transform', 'perspective(1000px) rotateY(-' degree 'deg)'); $(this).css('box-shadow', '-' degree 'px 0px 20px #fbe989'); } }).mouseleave(function () { $(this).addClass('transition-effect'); $(this).css('box-shadow', '1px 0px 20px #c1c1c1'); $(this).css('transform', 'perspective(0) rotateY(0deg)'); }) .transition-effect{ transition: all 0.5s ease-in-out; } lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;img src="https://www.cumhuriyet.com.tr/Archive/2021/8/3/1857648/kapak_173121.jpg" class="img-fluid img-thumbnail take-it" id="img"gt; Комментарии:
1. Теперь мне нужно начать градус с 0 для двух половин. Я постараюсь сделать это для плавного перехода.
2. Да, это незначительная деталь, дай мне знать, если это не сработает. Но в принципе вы можете удалить проверку, если mouseX gt; половина, и просто поставить градусы.
Ответ №2:
Мой последний подобный код для плавного перехода:
$('#img').mousemove(function (event) { $(this).removeClass('transition-effect'); let itemWidth = $(this).width(); let mousesX = event.offsetX; let half = itemWidth / 2; let mouseX = mousesX gt;= half ? Math.abs((itemWidth - mousesX) - half) : -((itemWidth - mousesX) - half); //console.log(mouseX); let degree = ((10 * mouseX) / itemWidth) ; let negativeDegree = -((10 * mouseX) / itemWidth);// For get a negative degree //console.log((itemWidth - mouseX) - half); if (mouseX gt;= half) { // console.log(`itemWidth:${itemWidth/2} - mouseX:${mouseX}`); $(this).css('transform', 'perspective(1000px) rotateY(' degree 'deg)'); $(this).css('box-shadow', '-' degree 'px 0px 10px gray'); } else { $(this).css('transform', 'perspective(1000px) rotateY(' degree 'deg)'); $(this).css('box-shadow', '' degree 'px 0px 10px gray'); } }).mouseleave(function () { $(this).addClass('transition-effect'); $(this).css('box-shadow', '1px 0px 20px #c1c1c1'); $(this).css('transform', 'perspective(0) rotateY(0deg)'); }) .transition-effect{ transition: all 0.5s ease-in-out; } lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;img src="https://www.cumhuriyet.com.tr/Archive/2021/8/3/1857648/kapak_173121.jpg" class="img-fluid img-thumbnail take-it" id="img"gt;