Question

我正在学习使用onmousemove事件，但无法使其工作，我的想法是倾斜一点图像以创建一种效果，就像它跟随鼠标一样的视差I猜测。这就是我想要实现的目标： https://tympanus.net/Development/PhotographyWebsiteConcept/#

这是代码：

    <div class="container-fluid" >
        <div class="row" onmousemove="myFunction(event)">
            <div class="col-sm-12" >
                <div class="hero" id="myDIV">
                    <div class="hero__back hero__back--static"></div>
                    <div class="hero__back hero__back--mover" id="move" style="transform: perspective(1000px) translate3d(-3.08931px, 9.6px, 48px) rotate3d(-0.96, -0.308931, 0, 2deg);"></div>
                    <div class="hero__front"></div>
                </div>
            </div>
        </div>
    </div>

这是JS：

<script>
function myFunction(e) {
    var xVal = -1/(win.height/2)*e.clientY + 1;
    var         yVal = 1/(win.width/2)*e.clientX - 1;
    var         transX = 20/(win.width)*e.clientX - 10;
    var         transY = 20/(win.height)*e.clientY - 10;
    var         transZ = 100/(win.height)*e.clientY - 50;
    var coor = "Coordinates: (" + x + "," + y + ")";
    document.getElementById("move").style.transform = 'perspective(1000px) translate3d(' + transX + 'px,' + transY + 'px,' + transZ + 'px) rotate3d(' + xVal + ',' + yVal + ',0,2deg)';
    document.getElementById("move").style.WebkitTransform = 'perspective(1000px) translate3d(' + transX + 'px,' + transY + 'px,' + transZ + 'px) rotate3d(' + xVal + ',' + yVal + ',0,2deg)';
}

</script>

Answer 1

我认为是因为类行的div没有高度，您可以使用检查器来检查该div的高度。您可以尝试将onmousemove函数添加到另一个div，它具有图像的完整高度。

onmousemove事件不起作用

1 个答案: