Question

前段时间我曾经看到过在鼠标悬停时使用炫酷透明效果的网站。

如何制作透明元素，当您将鼠标悬停在网站背景上时，您可以在该区域下方看到图像？

无法找到相关信息，请帮助:)

Answer 1

确定一些策略和一些例子。

战略：

放置背景
对它施加一些阻挡
制作具有相同背景的div
如果鼠标移动，请移动此div
如果div移动，请将背景移动到主背景的负位置。

示例：

＆＃13;

$(function(){
    $(document).mousemove(function(e){
        var x = e.pageX;
        var y = e.pageY;

        var $t=$(".transfier");
        var newLeft =x-$t.width() / 2;
        var newTop= y-$t.height() / 2;
        $t.offset({
            top: newTop,
            left: newLeft
        });

        $t.css('background-position-x', 0 - x + $t.width() / 2);
        $t.css('background-position-y', 0 - y + $t.height() / 2);
    });
});

＆＃13;

body {
    background: url(https://wallpaperscraft.com/image/height_canyon_retina_81205_3840x2400.jpg);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    margin: 0px;
}

.transfier {
    background: url(https://wallpaperscraft.com/image/height_canyon_retina_81205_3840x2400.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 200px;
    height: 200px;
    border: 2px solid green;
}

.blockMyView {
    background-color: white;
    width: 75%;
    height: 300px;
    border: 1px solid black;
    margin: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="transfier"> hoi </div>
<div class="blockMyView"></div>

＆＃13;

如何制作透明放大镜？

1 个答案: