Question

这个问题有点重复，但是我已经阅读了所有其他答案，但是它们都没有帮助。我有一个要放大并可以用鼠标移动的图像。就像这个网站上的横幅图片一样。 https://www2.hotelspro.com/。

这是我的图片的代码

<img src="https://via.placeholder.com/500" class="flickity-viewport">

我有一个jQuery脚本，可以执行鼠标移动并且效果很好。这是代码。

<script>
jQuery(document).ready(function($){

var lFollowX = 0,
lFollowY = 0,
x = 0,
y = 0,
friction = 1 / 10;

function moveBackground() {
x += (lFollowX - x) * friction;
y += (lFollowY - y) * friction;

translate = 'translate(' + x + 'px, ' + y + 'px) scale(1)';


$('.flickity-viewport').css({
'-webit-transform': translate,
'-moz-transform': translate,
'transform': translate
});

window.requestAnimationFrame(moveBackground);
}

$(window).on('mousemove click', function(e) {

var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - 
e.clientX));
var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - 
e.clientY));
lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
lFollowY = (10 * lMouseY) / 100;


});

moveBackground();

});
</script>

这里是CSS本身可以正常工作，但不适用于jQuery

.flickity-viewport{
transition: transform .2s ease-in-out;
}

.flickity-viewport:hover{
transform: scale(1.2);
}

我尝试了！important和我在这里找到的所有答案，但没有任何效果。希望有人可以帮助我:)

这是Codepen，它解释了我在说什么。我想按数字缩放图像，并能够像这样移动图像。 https://codepen.io/BilendM/pen/WBLmad

Answer 1

一旦您的JavaScript在元素上设置了transform，css就会被覆盖。参考站点使用transform:scale来设置悬停缩放，并根据鼠标移动来调整transform-origin属性。

这里的示例使用的js比您的示例少得多。当transform:scale应用“缩放”功能时，它会放大transform-origin。在此示例中，我将从传递到事件处理程序的事件中获取当前鼠标的位置，并将transform-origin设置为这些坐标。使用CSS过渡时间创建“摩擦”。缩放仍为0.2s，但移动设置为1s，因此图像快速缩放但重新放置缓慢。

jQuery(document).ready(function($) {

  $('.flickity-viewport').on('mousemove', function(e) {
    $(this).css('transform-origin', e.clientX + 'px ' + e.clientY + 'px');
  });

});

.flickity-viewport {
  transition: transform .2s ease-in-out,
    transform-origin 1s ease-out;
}

.flickity-viewport:hover {
  transform: scale(1.2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://via.placeholder.com/200" class="flickity-viewport">

jQuery禁用css：hover类

1 个答案: