我使用了blowup.js
插件作为基础,并尝试旋转图像,使镜头跟随旋转。但是它并没有起作用。
例如,当我输入rotate(180deg)
时,镜头和图像不匹配,如果我删除rotate(180deg)
则它们对齐。
有人知道怎么帮我吗?
var $element = $('#target');
$element.css({
'transform': 'rotate(180deg)'
}); // rotate imagem in html
// Constants
var $IMAGE_URL = $element.attr("src");
var NATIVE_IMG = new Image();
NATIVE_IMG.src = $element.attr("src");
var lens = document.createElement("div");
lens.id = "BlowupLens";
$("body").append(lens);
$blowupLens = $("#BlowupLens");
$blowupLens.css({
"position": "absolute",
"display": "none",
"pointer-events": "none",
"zIndex": 999999,
"width": 200,
"height": 200,
"border": "6px solid #FFF",
"background": "#FFF",
"border-radius": "50%",
"box-shadow": "0 8px 17px 0 rgba(0, 0, 0, 0.2)",
"background-repeat": "no-repeat",
});
// Show magnification lens
$element.mouseenter(function() {
$blowupLens.css("display", "block");
});
// Mouse motion on image
$element.mousemove(function(e) {
// Lens position coordinates
var lensX = e.pageX - (200 / 2);
var lensY = e.pageY - (200 / 2);
var width = $element.width();
var height = $element.height();
// Relative coordinates of image
var relX = e.pageX - $('#target').offset().left;
var relY = e.pageY - $('#target').offset().top;
// Zoomed image coordinates
var zoomX = -Math.floor(relX / width * (NATIVE_IMG.width) - 200 / 2);
var zoomY = -Math.floor(relY / height * (NATIVE_IMG.height) - 200 / 2);
var backPos = zoomX + "px " + zoomY + "px";
var backgroundSize = NATIVE_IMG.width + "px " + NATIVE_IMG.height + "px";
// Apply styles to lens
$blowupLens.css({
left: lensX,
top: lensY,
"background-image": "url(" + encodeURI($IMAGE_URL) + ")",
"background-size": backgroundSize,
"background-position": backPos,
"transform": "rotate(180deg)" //rotate the image original
});
})
// Hide magnification lens
$element.mouseleave(function() {
$blowupLens.css("display", "none");
});
#target {
margin-left: 160px;
width: 700;
height: 500px;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<img id="target" src="https://iili.io/0hL7ou.png">
</body>