JavaScript - Увеличение изображения при наведении

JavaScript - Увеличение изображения при наведении

Коллеги всем привет.

В сегодняшней статье мы рассмотрим как можно создать простым скриптом масштабирования изображения с помощью jQuery, который будет обеспечивать приятный эффект увеличительного стекла при наведении курсора на изображение. 

 

HTML Код.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Zoom Image On Hover</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
    <h1>Zoom Image On Hover</h1>
    <div class="magnify">
        <div class="magnifier" style="background-image: url(images/6498354090.png);"></div>
        <div class="magnified">
            <img src="images/6498354090.png" />
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script src="script.js"></script>
</body>
</html>

 

CSS Код.

.container{
    display: table;
    margin: 0 auto;
}
.container h1{
    text-align: center;
}

body {
    padding: 0px;
    background-color: #97b8ed;
}

.magnify {
    margin: 20px auto;
    display: inline-block;
    position: relative;
}
.magnify .magnified {
    display: block;
    z-index: 10;
    margin: auto;
    width: 600px;
    height: 450px;
    border: 5px solid #fff;
}
.magnify .magnifier {
    height: 200px;
    width: 200px;
    position: absolute;
    z-index: 20;
    border: 4px solid white;
    border-radius: 50%;
    background-size: 1000%;
    background-repeat: no-repeat;
    margin-left: -100px !important;
    margin-top: -100px !important;
    pointer-events: none;
    display: none;
}
img{
    width: 100%;
    height:100%;
}

 

JavaScript Код.

$(".magnified").hover(function(e){
  var imgPosition = $(".magnify").position(),
      imgHeight = $(".magnified").height(),
      imgWidth = $(".magnified").width();
  $(".magnifier").show();
  $(this).mousemove(function(e){
    
    var posX = e.pageX - imgPosition.left,
        posY = e.pageY - imgPosition.top,
        percX = (posX / imgWidth) * 100,
        percY = (posY / imgHeight) * 100,
        perc = percX + "% " + percY + "%";
    $(".magnifier").css({
      top:posY,
      left:posX,
      backgroundPosition: perc
    });
  });
}, function(){
  $(".magnifier").hide();
});

 

Всем спасибо, я надеюсь что вам моя статья хоть чем-то помогла.

 

ПОХОЖИЕ СТАТЬИ

jQuery карусель с эффектом увеличительного стекла
jQuery карусель с эффектом увеличительного стекла
WEB
JQuery плагин для увеличения изображения с увеличительным стеклом
JQuery плагин для увеличения изображения с увеличительным стеклом
WEB
JQuery - Галерея изображений с увеличением при наведении
JQuery - Галерея изображений с увеличением при наведении
WEB