Всплывающий div от наведения изображения из функции javascript
поэтому я работал над чем-то на стороне, и я пытался создать всплывающее окно масштабирования (div), используя функцию JavaScript на этой странице: https://www.w3schools.com/howto/howto_js_image_zoom.asp
Я попробовал несколько вещей и посмотрел здесь на многие вопросы, но не смог понять. Я также могу вставить сюда код, если необходимо, или дополнительные объяснения того, что я пытаюсь сделать. Любые предложения будут ценны!
@ChristopherMMiller что-то вроде этого: jsfiddle.net/gb0xcuwz/5, но я хочу, чтобы результирующее изображение было всплывающим div, когда я наводил курсор на исходное изображение
Что вы имеете в виду под «всплывающим окном»?
@ gforce301, поэтому функция принимает идентификатор изображения и идентификатор div, а идентификатор div - это версия исходного изображения для перемещения мыши. Я хочу, чтобы версия div была всплывающим окном увеличенной области, когда я наводил курсор на исходное изображение.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Обновлять:
http://jsfiddle.net/gb0xcuwz/23/ Просто добавил немного css (который не требует пояснений)
(Надеюсь, это то, что вы хотели)
Старый ответ:
(сохраняя его на случай, если кто-то захочет)
Итак, вы указали это: http://jsfiddle.net/gb0xcuwz/5 в комментарии.
Я внес некоторые изменения, основанные на методе проверки и испытания (это что за фраза?), И придумал следующее: http://jsfiddle.net/gb0xcuwz/16/
Вот и фрагмент кода:
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
//create lens:
lens = document.createElement("img");
lens.setAttribute("class", "img-zoom-lens");
//insert lens:
img.parentElement.insertBefore(lens, img);
//calculate the ratio between result DIV and lens:
cx = 300 / lens.offsetWidth;
cy = 300 / lens.offsetHeight;
//set background properties for the result DIV:
lens.style.backgroundImage = "url('" + img.src + "')";
lens.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
//execute a function when someone moves the cursor over the image, or the lens:
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
//and also for touch screens:
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
//img.addEventListener("mouseenter", result);
function moveLens(e) {
var pos, x, y;
//prevent any other actions that may occur when moving over the image:
e.preventDefault();
//get the cursor's x and y positions:
pos = getCursorPos(e);
//calculate the position of the lens:
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
//prevent the lens from being positioned outside the image:
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;}
//set the position of the lens:
lens.style.left = x + "px";
lens.style.top = y + "px";
//display what the lens "sees":
lens.style.backgroundPosition = "-" + (x * cx + lens.offsetWidth) + "px -" + (y * cy + lens.offsetHeight) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
//get the x and y positions of the image:
a = img.getBoundingClientRect();
//calculate the cursor's x and y coordinates, relative to the image:
x = e.pageX - a.left;
y = e.pageY - a.top;
//consider any page scrolling:
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
document.addEventListener("DOMContentLoaded", function(){
imageZoom("myimage", "myresult");
})* {box-sizing: border-box;}
.img-zoom-container {
position: relative;
}
.img-zoom-lens {
position: absolute;
border: 3px solid #A9A9A9;
width: 100px;
height: 100px;
}
<body>
<h1>Picture</h1>
<p>Mouse over the image:</p>
<div class = "img-zoom-container">
<img id = "myimage" src = "https://i.imgur.com/50dDbmr.jpg" width = "300" height = "200">
</div>
</body>Спасибо за ваш ответ! Я действительно искал что-то вроде этого, где выскакивает другое окно: starplugins.com/cloudzoom/examples#
Пожалуйста, вставьте образец кода, чтобы я мог лучше понять, как ответить на ваш вопрос.