onmousemove 事件不起作用

Question

我正在学习使用 onmousemove 事件，但无法使其正常工作，我的想法是稍微倾斜图像以创建一种效果，就像它跟随鼠标一样，我猜是一种视差。这就是我想要实现的目标： 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

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

onmousemove 事件不起作用

onmousemove event not working

javascript

onmousemove