Onclick（）事件：圖片的隨機出現

我的代碼在網頁的中心顯示圖片，如果點擊是在圖片的外部或內部，則會執行2種不同的操作。我想在每個onclick（）事件中隨機更改圖像的位置（不管點擊是在還是在外），同時保持頁面初始大小。Onclick（）事件：圖片的隨機出現

這兩個操作都正確完成，但圖像不會更改位置。有人能告訴我我應該改變什麼嗎？

<html> 
    <head> 
    <title>random position</title> 
    </head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"> 
    $(window).height(); 
    $(window).width(); 
    </script> 

    <body> 

    <style> 

    #myImage { position: absolute; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin:auto; } 
    </style> 

    <script> 
function moveImg() { 
    var img = document.getElementById("myImage"); 

    var width = $(img).width(); 
    var height = $(img).height(); 


    document.addEventListener("click", function(e) { 
    var offset = $(img).offset(); 
    if (e.target === img) { 
     action 1; 
    } 
    else { 
    action 2; 
    } 
    // GENERATE RANDOM LOCATION IN BOTH CASES 
    img.offset.left = Math.floor(Math.random() * (window.width()- 0) + 0); 
    img.offset.top = Math.floor(Math.random() * (window.height()- 0) + 0); 


    }, false); 
} 
    </script> 
     <img id="myImage" src="img.gif" onclick="moveImg()"> 
    </body> 
</html>

來源

2017-04-03 Gigi

「行動1」和「行動2」是什麼意思？我的猜測是當你執行這段代碼時你會得到一個JS錯誤。您還不斷添加越來越多的事件偵聽器，每次點擊... –

不，如果我運行相同的代碼沒有隨機位置部分是行得通的。在我用另一種方法產生rondom posion之前（下）。它工作，但它不完全正確：/ * var x = Math.floor（Math.random（）*（max - min）+ min）;數學式（Math.random（）*（max-min）+ min）; img.style.top = x +「px」; img.style.left = y +「px」; */ – Gigi

對不起，這裏是我用來改變位置的代碼：var x = Math.floor（Math.random（）* 400）; var y = Math.floor（Math.random（）* 400）; img.style.top = x +「px」; img.style.left = y +「px」; – Gigi

這裏有幾個問題。您在用戶點擊時調用某個函數，但在該函數中您將爲該圖像上的點擊分配一個事件監聽器。在每次點擊中繼續添加越來越多的事件偵聽器沒有多大意義。我更改了下面的代碼來演示一次添加事件偵聽器，而不是每次點擊。

其次，action 1和action 2沒有任何意義。我評論這些，因爲我不確定你想在那裏完成什麼。

您還錯誤地嘗試更改圖像的頂部和左側屬性。我糾正了使用css()函數。

以下代碼顯示了javascript中的更改。或者你可以click here

$(document).ready(function() { 

    var img = document.getElementById("myImage"); 

    var width = $(img).width(); 
    var height = $(img).height(); 


    document.addEventListener("click", function(e) { 
    var offset = $(img).offset(); 
    if (e.target === img) { 
     //action 1; 
    } 
    else { 
    //action 2; 
    } 
    // GENERATE RANDOM LOCATION IN BOTH CASES 
    $(img).css({ 
    top: Math.floor(Math.random() * $(window).height()), 
    left: Math.floor(Math.random() * $(window).width())}); 
    }, false); 
});

來源

2017-04-03 13:58:06

嗨，山姆，是的，行動1和行動2只是我在做if-else語句的名字。感謝您調整事件偵聽器，但是您的代碼仍然無法解決我在初始頁面大小內隨意移動圖像的主要問題。我怎麼能這樣做？ – Gigi

如果我使用下面的代碼，圖像總是顯示在屏幕的右側，而我希望圖像以相等的概率出現在屏幕的任何部分 left：Math.floor（Math.random（） *（$（window）.width（） - width）+ 0）， top：Math.floor（Math.random（）*（$（window）.height（） - height）+ 0）}）; – Gigi

@Gigi你是什麼意思「屏幕的正確部分。」我只是檢查，它應該實際上工作。 Math.random（）返回一個介於0和1之間的數字，因此將其乘以窗口寬度/高度將選擇窗口內的隨機位置。我只是測試它，它似乎工作。我附上了一個應該演示它的小提琴 –

Onclick（）事件：圖片的隨機出現

回答

相關問題