时间戳

首页 > 解决方案 > jQuery缩放功能不适用于悬停图像

javascript - jQuery缩放功能不适用于悬停图像

问题描述

我正在使用这个库：https
://www.jacklmoore.com/zoom/ 它在将鼠标悬停在图像上时添加了缩放功能。我确实在我的主题中添加了库，并将这个 jQuery 代码添加到我的 js 文件中：

$(document).ready(function(){
    $('.head-image img').zoom();
});

这是图像所在的 HTML：

<div class="head-image">
    <img src="<?php the_post_thumbnail_url('full'); ?>" class="img-fluid">
</div>

当我将图像悬停在网页上时，没有任何变化，但如果我查看检查器，我确实看到添加了 zoomImg 类并且 CSS 正在更改，但我没有看到图像缩放。

这是网页网址：https ://www.dev.ruitershopboxmeer.nl/paard/zadels-en-toebehoren/zadeldekjes/kingsland-zadeldekje-carin/

有人知道为什么图像没有缩放吗？

谢谢你的时间！

标签： javascriptjqueryhtmlcss

解决方案

我在这里有一个替代解决方案来满足您的要求：

const img=document.querySelector('.image');
const pro=document.querySelector('.image img');

img.style.width=(pro.clientWidth)+'px';
var zoomSize = pro.clientHeight*6;
img.addEventListener('mousemove', printPosition);
img.addEventListener('mouseout', back);

function getPosition(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left;
  var y = e.clientY - rect.top;
  return {
    x,
    y
  }
}

function printPosition(e) {
  var position = getPosition(e);
    xpos=position.x * (100/pro.clientWidth);
    ypos=position.y * (100/pro.clientHeight);
    pro.style.transition="0s";

    pro.style.transform='translate('+xpos*-5+'%, '+ypos*-5+'%)';
    pro.style.height=zoomSize+"px";

  console.log('X: ' + xpos + ' Y: ' + ypos);
}

function back(e) {
    pro.style.transform='translate(0px, 0px)';
    pro.style.height='100%';
    pro.style.transition="1s";
}

https://codepen.io/thevectorator/pen/NWGeBPm

推荐阅读