onmousemove事件不起作用

我正在學習使用onmousemove事件，但無法使其工作，它的想法是傾斜一點圖像來創建一個效果，就像它跟隨着鼠標我猜的一種視差。這是我想達到什麼： https://tympanus.net/Development/PhotographyWebsiteConcept/#onmousemove事件不起作用

，這是代碼：

<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>

來源

2017-10-19 Gaspar

我想是因爲類行的div有沒有高度，您可以使用檢查器來檢查該div的高度。您可以嘗試將onmousemove函數添加到另一個div，該div具有圖像的全部高度。

來源

2017-10-19 22:56:12 Keming

onmousemove事件不起作用

回答

相關問題