几周来我到处都在寻找这个，但我就是找不到任何东西来告诉我我做错了什么或者如何继续。目标是为带有小图片的产品创建类似于亚马逊在鼠标悬停时放大的功能。
我目前不知道如何继续，但我知道我需要两张图片——一张是“放大”尺寸的，一张是“缩小”尺寸的。 我没有使用 Jquery- 我无法根据雇主的要求将它或任何插件安装到网站。我基本上是在要求更难的答案，对此我提前表示歉意。我必须从头开始做这件事。 警告:我是一名编程学生。随心所欲。
我有 HTML 和 CSS 脚本，因为我们这里实际上没有 IDE，所以我在 codecademy 的元素部分做这个，否则我必须完全现场编程。你可以找到我的代码 here ，但我也会在下面发布代码，因为该链接必然会更改代码，因为它使用程序保存。
注意:我最初拥有它，因此灰色框在相对中心跟随我的鼠标。它在移动时闪烁，但它正在工作。目前虽然决定不这样做，至少在我的工作电脑上是这样。我没有在我的个人电脑上测试过它。
编辑:代码在我的 Surface Pro 3 上运行，尽管它确实跟随鼠标离开图像(这是临时的，我随机抓取的东西)。我不确定为什么代码不能在我的工作计算机上运行，尽管这很可能是因为它是 Macintosh OSX 版本 10.6.8...
HTML 代码:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<img id="imgZoom" onmousemove="zoomIn()" onmouseout="zoomOut()" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg">
<div id="overlay" onmousemove="zoomIn()"></div>
</body>
</html>
CSS 代码:
#imgZoom {
height: 300;
}
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:20%;
height:20%;
padding: 25px;
border: 5px solid gray;
background-color: white;
opacity:0.4;
text-align:center;
z-index: 1000;
}
Javascript 代码:
function zoomIn()
{
var element = document.getElementById("overlay");
element.style.visibility = "visible";
var x = event.clientX; // Get the horizontal coordinate
var y = event.clientY; // Get the vertical coordinate
element.style.top = y - 80;
element.style.left = x - 80;
}
function zoomOut()
{
var element = document.getElementById("overlay");
element.style.visibility = "hidden";
}
最佳答案
你可以通过在鼠标悬停时播放背景位置来做到这一点，只需在鼠标悬停时移动背景位置即可 DEMO
function zoomIn(event) {
var element = document.getElementById("overlay");
element.style.display = "inline-block";
var img = document.getElementById("imgZoom");
var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
element.style.backgroundPosition = (-posX * 4) + "px " + (-posY * 4) + "px";
}
function zoomOut() {
var element = document.getElementById("overlay");
element.style.display = "none";
}#overlay {
border: 1px solid black;
width: 200px;
height: 200px;
display: inline-block;
background-image: url('https://via.placeholder.com/400.png');
background-repeat: no-repeat;
}<img id="imgZoom" width="200px" height="200px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="https://via.placeholder.com/200.png">
<div id="overlay" onmousemove="zoomIn(event)"></div>关于Javascript:在没有 Jquery 或插件的情况下放大鼠标悬停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33811041/