如何讓我的div元素移動超過200px？

我一直在使用jQuery開發一個項目，其中我有一個div元素，上面寫着「click」，當您嘗試點擊它時，它會移動到窗口內的隨機位置。我遇到的問題是，每隔一段時間，div將只移動一點點，將光標留在div內，允許用戶點擊鏈接。如何讓我的div元素移動超過200px？

我是相當新的JavaScript，我不太確定我應該如何去做這樣的事情。

我在想我可以做一些事情，比如從舊的位置減去新的位置，並檢查它們是否有小於200px的差異，如果他們這樣做，重新計算數字。如果這不符合你的要求，我完全接受其他方法。

function setPosition() { 
 
    var randY = Math.floor(Math.random() * (window.innerHeight - 200)); 
 
    var randX = Math.floor(Math.random() * (window.innerWidth - 200)); 
 

 
    $('#square').animate({ 
 
    top: randY + 'px', 
 
    left: randX + 'px' 
 
    }, 200); 
 
} 
 

 
$(document).ready(function() { 
 
    setPosition() 
 
    var tries = 0; 
 
    //tries is just to stop it after it reaches 1000. 
 
    //I'm planning to make some kind of page to congradulate you on wasting your time. 
 

 

 
    $('#square').mouseenter(function() { 
 
    if (tries < 1000) { 
 
     setPosition(); 
 

 
     tries += 1; 
 
     console.log(tries) 
 
    } 
 
    }); 
 
});

#square { 
 
    background: orange; 
 
    height: 115px; 
 
    width: 150px; 
 
    position: relative; 
 
    text-align: center; 
 
    padding-top: 35px; 
 
} 
 
h3, 
 
h3 * { 
 
    font-family: "Comic Sans MS", cursive, sans-serif; 
 
    font-size: 20px; 
 
    vertical-align: middle; 
 
    position: relative; 
 
    color: black; 
 
    text-decoration: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 
    <link rel=stylesheet type=text/css href=square.css> 
 
    <script src=jquery-1.11.3.min.js></script> 
 
    <script src=square.js></script> 
 
</head> 
 

 
<body> 
 
    <div id=square> 
 
    <h3><a href=''>Click</a></h3> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2015-12-02 ETHAN BEIGH

你的建議的解決方案聽起來足夠直截了當給我。如果我是你，我會嘗試。 – dave

我想你可能想運行隨機邏輯，直到找到一個組合超過200個像素遠離它的當前位置。

關閉我的頭頂，那會是這樣的：

function setPosition() { 
    var $square = $('#square'); 
    var prevY = $square.offset().top; 
    var prevX = $square.offset().left; 
    var randY, randX; 

    do { 
     randY = Math.floor(Math.random() * (window.innerHeight - 200)); 
     randX = Math.floor(Math.random() * (window.innerWidth - 200)); 
    } while(Math.abs(randY - prevY) < 200 || Math.abs(randX - prevX) < 200); 

    $square.animate({ 
    top: randY + 'px', 
    left: randX + 'px' 
    }, 200); 
}

來源

2015-12-02 17:05:50 Quantastical

我會更進一步，看看這個點是否總共超過200px：'Math.sqrt（Math.pow（randY - prevY，2）+ Math.pow（randX - prevX，2））> 200' - 使用三角。 – somethinghere

這可能是一個好主意。這可能也是一個好主意，使用方，而不是左上角的中心，即'$ square.offset（）頂部+ $ square.outerWidth（）/ 2'和'頂部：蘭迪 - $平方米。 outerWidth（）/ 2 +'px''。 – Quantastical

如何讓我的div元素移動超過200px？

回答

相關問題