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

有关悬停缩放，请看here。

我希望我现在就知道你。当鼠标悬停图像时（mouseover-event），您必须创建一个包含图像的新元素并将其添加到正文。不应将其放置在原始图像上，以免立即触发mouseleave事件。稍后，当用户将鼠标移出小图像时，您可以在mouseleave-event触发时删除/删除创建的元素。

我建议对大图像元素使用绝对定位。

Answer 2

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

$(document).mousemove();

示例：

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

查看此小提琴以了解可用的https://jsfiddle.net/q1xc7vbg/

欢呼

在鼠标旁边显示弹出图像

2 个答案: