Javascript:在没有 Jquery 或插件的情况下放大鼠标悬停
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/33811041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: Zoom in on mouseover WITHOUT Jquery or plugins
提问by Kitfoxpup
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.
我已经到处寻找这个数周了,但我根本找不到一些东西来告诉我我做错了什么或者如何继续。目标是为具有小图像的产品创建类似于亚马逊在鼠标悬停时放大的功能。
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.
我目前不知道如何继续,但我知道我需要两张图片 - 一张是“放大”尺寸,一张是“缩小”尺寸。我没有使用 Jquery- 我无法通过雇主的要求将它或任何插件安装到网站上。我基本上是在要求更难的答案,我提前为此道歉。我必须从头开始做这件事。警告:我是一名编程学生。想拿就拿吧。
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.
我有 HTML 和 CSS 脚本,因为我们这里实际上没有 IDE,所以我在 codecademy 的项目部分执行此操作,否则我必须完全实时地对其进行编程。你可以在这里找到我的代码,但我也会在下面发布代码,因为该链接肯定会更改代码,因为它使用程序保存。
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.
注意:我最初拥有它,因此灰色框在相对中心跟随我的鼠标。它在移动时闪烁,但它正在工作。目前虽然决定不这样做,至少在我的工作计算机上。我没有在我的个人电脑上测试过。
Edit: 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...
编辑:代码在我的 Surface Pro 3 上运行,尽管它确实跟随鼠标离开图像(这是临时的,我随机抓取的东西)。我不确定为什么代码在我的工作计算机上不起作用,尽管可能是因为它是 Macintosh OSX 版本 10.6.8...
HTML Code:
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 Code:
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 code:
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";
}
回答by CY5
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>
回答by Amit
This works for me: (Here is a JSFiddle)
#imgZoom {
height: 300;
}
img#imgZoom:hover {
position: relative;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
z-index: 1000;
}
You can also add this for a cool transition effect:
您还可以添加这个以获得很酷的过渡效果:
* {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
*Also, you can apply the same logic not only for images, but for divs as well.
*此外,您不仅可以对图像应用相同的逻辑,还可以对 div 应用相同的逻辑。
回答by Ghufran Khalil
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: 100px;
height: 100px;
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>
回答by Vishal
try this
尝试这个
window.addEventListener("load", imageZoom("my-image"));
function imageZoom(imgID) {
let img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById("my-result");
lens = document.querySelector(".img-zoom-lens");
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
function moveLens(e) {
let pos, x, y;
e.preventDefault();
pos = getCursorPos(e);
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}
lens.style.left = x + "px";
lens.style.top = y + "px";
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
function getCursorPos(e) {
let a, x = 0, y = 0;
e = e || window.event;
a = img.getBoundingClientRect();
x = e.pageX - a.left;
y = e.pageY - a.top;
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
// Function to change Images
(function () {
let originalImg = document.querySelector("#my-image");
let galleryImg = document.querySelector(".img-gallery").children;
for(let i = 0; i < galleryImg.length; i++) {
galleryImg[i].onclick = function() {
originalImg.setAttribute("src", this.getAttribute("src"));
imageZoom("my-image");
};
}
})();
* {
box-sizing: border-box;
font-family: sans-serif;
}
.img-container {
position: relative;
display: flex;
justify-content: space-between;
}
.img-zoom-lens {
position: absolute;
border: 3px solid rgb(0, 126, 255);
background-color: rgba(0, 126, 255, .2);
width: 40px;
height: 40px;
}
#my-image {
max-width: 50%;
height: 300px;
}
.img-zoom-result {
border: 1px solid #f1f1f1;
width: 300px;
height: 300px;
}
.img-gallery {
margin: 16px 0;
}
.img-gallery img {
display: inline-block;
cursor: pointer;
width: 110px;
height: 110px;
border: 1px solid #ccc;
padding: 4px;
margin-right: 8px;
}
.img-gallery img:active {
box-shadow: 0 0 0.1rem 0.1rem rgba(38,143,255,.5);
}
.img-gallery img:focus {
box-shadow: 0 0 0.1rem 0.1rem rgba(38,143,255,.5);
}
<h1>Create an Image Zoom</h1>
<div class="img-container">
<div class="img-zoom-lens"></div>
<img id="my-image" src="https://parrot-tutorial.com/images/carousel_red3.jpg">
<div id="my-result" class="img-zoom-result"></div>
</div>
<p>Choose more images:</p>
<div class="img-gallery">
<img src="https://parrot-tutorial.com/images/avatar.jpg">
<img src="https://parrot-tutorial.com/images/bottleship.jpg">
<img src="https://parrot-tutorial.com/images/toxic.jpg">
</div>
Reference:Create an Image Zoom
参考:创建图像缩放