Javascript：放大鼠标悬停没有JQuery或插件 [英] Javascript: Zoom in on mouseover WITHOUT Jquery or plugins
问题描述
我几个星期都在寻找这个地方，我根本找不到什么东西来告诉我我做错了什么，甚至如何去做。我们的目标是创建一个类似于亚马逊缩放的小图片产品的功能。
I've looked for this everywhere for weeks, and I simply cannot find something to tell me what I'm doing wrong or how to even proceed. The goal is to create a function similar to Amazon's zoom in on mouseover for products with small images.
我目前处于亏损状态，虽然我是意识到我需要两张图像 - 一张放大，另一张放大。 我没有使用Jquery - 我无法通过我的雇主的请求将其安装或插入网站。我基本上要求更难的答案，并且我提前为此道歉。我必须从中度伤害做到这一点。 警告：我是一名编程学生。
I'm currently at a loss for how to proceed, though I am aware that I will require two images- one in the "zoomed in" size and one in the "zoomed out" size. I'm not using Jquery- I cannot install it or any plugins to the website via my employer's request. I'm basically asking for the harder answer, and I apologize for that in advance. I must do this from moderate scratch. Warning: I am a programming Student. Take that as you will.
我有HTML和CSS脚本，因为我们实际上没有IDE，所以我在codecademy的项目部分，否则我不得不完全生活编程。您可以在此处找到我的代码，但我也会在下面发布代码，因为链接必须改变代码，因为它使用程序保存。
I've got HTML and CSS script, and because we don't actually have an IDE here I'm doing this on codecademy's project section, otherwise I'd have to program this completely live. You can find my code here, but I'll also post the code below, as that link is bound to have changing code since it uses procedural saving.
注意：我原来是这样的，灰色框是在我的鼠标的相对中心处。它在移动时闪烁，但它正在工作。目前虽然决定不，至少在我的工作电脑上。我没有在我的个人电脑上测试过它。
Note: I originally had it so that the gray box was following my mouse at relative center. It was flickering as it moved, but it was working. Currently though it's decided not to, at least on my work computer. I've not tested it on my personal computer.
编辑：代码在我的Surface Pro 3上工作，虽然它确实跟着鼠标离开图像是暂时的，随机我抓住了）。我不知道为什么代码在我的工作计算机上无法正常工作，尽管很可能是因为它是Macintosh OSX 10.6.8版本...
The code is working on my Surface Pro 3, though it does follow the mouse off of the image (which is temporary and something random I grabbed). I'm not sure why the code isn't working on my work computer, though it's probable because it's a Macintosh OSX version 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代码：
CSS Code:
#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
you can just do it by playing background-position on mouse-over just moving background-position on mouseover 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('http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg');
background-repeat: no-repeat;
}
<img id="imgZoom" width="200px" height="200px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg">
<div id="overlay" onmousemove="zoomIn(event)"></div>
这篇关于Javascript：放大鼠标悬停没有JQuery或插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
