在鼠標旁邊顯示彈出圖像

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>

社會保障：

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小提琴

提前感謝您的幫助

Answer 1

要在光標旁邊顯示圖像，您可以使用這個 jQuery 方法

$(document).mousemove();

例子：

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

看到這個小提琴的工作https://jsfiddle.net/q1xc7vbg/

干杯

Answer 2

對於懸停縮放，請看這里。

我希望我現在得到了你。 當鼠標懸停在圖像上時（鼠標懸停事件），您必須創建一個包含圖像的新元素並將其附加到正文中。 這不應放置在原始圖像上，以免立即觸發 mouseleave 事件。 稍后，當用戶將鼠標移出小圖像時，您可以在 mouseleave-event 觸發時刪除/刪除創建的元素。

我建議在大圖像元素上使用絕對定位。