[英]Randomly reposition jQuery UI dialog (easter egg)
我目前正在我的應用程序中實現復活節彩蛋功能。 每當用戶將鼠標懸停在jQuery UI關閉按鈕上時,對話框div均應隨機重新定位(因此用戶無法將其關閉)。
這是我到目前為止嘗試過的:
$('.ui-icon-closethick').hover(function() {
console.log("hover");
$('#trollDialog').dialog('option', 'position',
[randomX, randomY]
);
});
不幸的是,對話框根本沒有重新定位。 如何用絕對的x和y位置重新定位對話框?
這是一個快速的工作示例:
$("#dialog").dialog(); $(".ui-dialog-titlebar-close").hover(function () { var randomPos = "left" + (Math.random() * 10 < 5 ? "-" : "+") + Math.random() * 100 + " " + "top" + (Math.random() * 10 < 5 ? "-" : "+") + Math.random() * 100; $("#dialog").dialog("option", "position", { my: randomPos }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <div id="dialog" title="Hover to Move"></div>
如果要使用jQuery-UI的position
則必須設置left
和top
屬性的偏移量
注意:如果您查看“整頁”,則該摘錄效果更好
不是絕對定位,但是您可以做相對定位 :
$('.ui-icon-closethick').hover(function(e) {
var newPos = (Math.floor(Math.random() * 2) == 0 ? "left-" : "right-") +
(Math.floor(Math.random() * 100)) + " " +
(Math.floor(Math.random() * 2) == 0 ? "bottom-" : "top-") +
(Math.floor(Math.random() * 100));
$( "#trollDialog" ).dialog( "option", "position", {
my: newPos
});
});
不是完美的隨機化,而是一個示例
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.