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