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（）事件：图片的随机出现

回答

相关问题