創建新的div並使用jQuery增大鼠標的空閑大小？

Question

當鼠標閑置x倍的時間時，我嘗試使用jquery在鼠標的位置上創建一個新的div。 如果它保持空閑狀態，則div的大小將增加。 當我移動鼠標時，創建的新div仍將保留。 我將如何使用下面附帶的jquery進行此操作？ 我認為應該遵循相同的邏輯？ 非常感謝。

 idleTimer = null; idleState = false; idleWait = 2000; (function ($) { $(document).ready(function () { $('*').bind('mousemove keydown scroll', function () { clearTimeout(idleTimer); if (idleState == true) { // Reactivated event $("body").append("<p>Welcome Back.</p>"); } idleState = false; idleTimer = setTimeout(function () { // Idle Event $("body").append("<p>You've been idle for " + idleWait/1000 + " seconds.</p>"); idleState = true; }, idleWait); }); $("body").trigger("mousemove"); }); }) (jQuery) 

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

Answer 1

您將需要一個間隔來檢查空閑狀態。 我的示例可能不是您想要的100％，但是您應該可以根據自己的喜好進行調整。

 var idleTimer = null; var idleState = false; var idleWait = 2000; var idleInterval = 1000; var idleStartTime = Date.now(); var mouseX = 0; var mouseY = 0; (function($) { $(document).ready(function() { //Set a interval that checks the idle state setInterval(function() { if (idleState == true) { //add element if it doensn't excist, otherwise update it if ($('#idleDiv').length === 0) { var $el = $('<div>'); $el.attr('id', 'idleDiv'); $el.css('left', mouseX); $el.css('top', mouseY); $el.html('<p>You\\'ve been idle for ' + ((Date.now() - idleStartTime) / 1000) + ' seconds.</p>'); $("body").append($el); } else { $('#idleDiv').html('<p>You\\'ve been idle for ' + ((Date.now() - idleStartTime) / 1000) + ' seconds.</p>'); } //change the height when idle $('#idleDiv').height($('#idleDiv').height() + 10); } }, idleInterval); //sets the idleState to false on mousemove events and to true when no mouse move happended for 'idleWait' milliseconds. $(document).on('mousemove', function(event) { idleStartTime = Date.now(); idleState = false; clearTimeout(idleTimer); idleTimer = setTimeout(function() { idleState = true }, idleWait); //Set the mouse coordinates mouseX = event.pageX; mouseY = event.pageY; }); }); })(jQuery) 

 html, body { padding: 0px; margin: 0px; } #idleDiv { background-color: gray; position: absolute; } 

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

Answer 2

我建議執行以下步驟：

1. 在bind function（）中，將事件作為參數傳遞。
2. 在idletimeout函數內部，創建一個div元素，其絕對位置基於鼠標坐標在左側和頂部

var elem =“”; $（div）.append（elem）; lastElem = $（div）.last（）;

3. 設置一個間隔，在每個指定的時間之后運行，這樣它將相應地增加lastElem的大小。 清除鼠標移動的間隔。

我在這里概述了要點，您可以通過研究來獲得實際的代碼...它們都可以在Internet上找到。

希望能幫助到你。