javascript - 在鼠标旁边显示弹出图像

Question

在我的网站上，我试图创建一个悬停图像的弹出窗口，以便当用户将鼠标移动到图像上时，该图像应该以其原始大小显示在鼠标旁边的弹出窗口中......一些东西比如浏览器的 HooverZoom+ 插件……

现在我的代码差不多可以工作了...它在弹出窗口中显示图像，但它在屏幕中间居中...我怎样才能让它显示在屏幕的左侧或右侧鼠标？

我还使用 Bootstrap 进行图像布局

这是我的代码和 JSFiddle:

HTML:

<div id="page-content-wrapper">
    <div class="container dodatki pb-5">
        <div class="row text-center">
            <div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Poševni vrh omare">

                <p class="dodatki-desc">Poševni vrh omare</p>
            </div>
            <div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Kovinski podstavek omare">

                <p class="dodatki-desc">Kovinski podstavek omare</p>
            </div>
            <div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Sedežni podstavek omare">

                <p class="dodatki-desc">Sedežni podstavek</p>
            </div>
        </div>
        <div class="row text-center">
            <div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Kovinski podstavek brez nogice">

                <p class="dodatki-desc">Kovinski podstavek brez nogice</p>
            </div>
            <div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Kovinski podstavek z nastavljivo nogico">

                <p class="dodatki-desc">Kovinski podstavek z regulirno nogico</p>
            </div>
            <div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Viseča pregradna stena">

                <p class="dodatki-desc">Viseča pregradna stena</p>
            </div>
        </div>
        <div class="row text-center">
            <div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="PVC etiketni okvir">

                <p class="dodatki-desc">PVC etiketni okvir</p>
            </div>
            <div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Obesna kljukica za v omaro">

                <p class="dodatki-desc">Obesna kljukica</p>
            </div>
            <div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="PVC pladenj za čevlje">

                <p class="dodatki-desc">PVC pladenj za čevlje</p>
            </div>
        </div>
    </div>
</div>

SCSS:

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-x: hidden;
    height: 100%;
}

body {
    margin: 0;
    font-size: 16px;
    line-height: 1.428571429;
    padding: 0;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
}
#page-content-wrapper {
    width: 100%;
    position: absolute;
}
.dodatki {
    img {
        height: 10rem;
        transition: all .2s ease-in-out;
        &:hover {
            transform: scale(1.4);
        }
    }
    .dodatki-desc {
        margin-top: 16px;
        margin-bottom: 10px;
        font-size: 0.8125rem;
        color: #666666;
    }
}
.show {
    z-index: 999;
    display: none;
    .img-show {
        width: 650px;
        height: 650px;
        background: #FFF;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        overflow: hidden;
        -webkit-box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -7px rgba(0,0,0,0.2);
        box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -7px rgba(0,0,0,0.2);
        img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    }
}

JS:

$(document).ready(function() {

    "use strict";

    $(".popup img").mouseover(function () {
        var $src = $(this).attr("src");
        $(".show").fadeIn();
        $(".img-show img").attr("src", $src);
    });

    $(".popup, .img-show").mouseleave(function () {
        $(".show").fadeOut();
    });
});

JS Fiddle

提前感谢您的帮助

Answer 1

要在光标旁边显示图像，您可以使用这个 jQuery 方法

$(document).mousemove();

例子:

$(document).mousemove(function(e) {
    $('.logo').offset({
        left: e.pageX,
        top: e.pageY + 20
    });
});

请参阅工作 fiddle https://jsfiddle.net/q1xc7vbg/

干杯