Question

每当我的鼠标空闲4秒钟时，我都试图创建一个新的div。随着闲置时间的延长，div的大小应继续增加。到目前为止，我的页面上似乎没有任何显示？我将我的jquery放在下面的代码段中。非常感谢您的帮助。

   
var clickTimer;

// make a counter
var n = 0;

$('body').mouseup(function() {
  clearTimeout(clickTimer);
  // Clear interval
  return false;

}).mousedown(function() {

  // Set interval
  clickTimer = window.setInterval(function() {

    // add to n every 4 milliseconds
    n++;

    // tranform circle's css every 4 milliseconds
    $('#stoppedcircle').css('transform', 'scale(' + n / 10 + ')');

  }, 4);
  return false;
});

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

Answer 1

var clickTimer;

// make a counter
var n = 0;

$('body').mousemove(function() {
  clearTimeout(clickTimer);
  // Clear interval
  return false;

}).click(function() {
  // Set interval
  clickTimer = window.setInterval(function() {

    // add to n every 4 milliseconds
    n++;

    // tranform circle's css every 4 milliseconds
    $('#stoppedcircle').css('transform', 'scale(' + n / 10 + ')');

  }, 4);
  return false;
});

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

请使用'mousemove'和'click'事件

Answer 2

如何使用关键帧？

$(function() {
  var anime = 'anime-page-cover';
  var overlay = $('.overlay');
  var delay = 4 * 1000;
  setInterval(function() {
    overlay.addClass(anime);
  }, delay);
  var hideOverlay = function() {
    overlay.removeClass(anime);
  };
  $(document).on('mousemove', hideOverlay).on('input', hideOverlay).on('click', hideOverlay);
});

.overlay {
  width: 1px;
  height: 1px;
  background-color: #ccc;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.anime-page-cover {
  animation: page-cover 10s;
  animation-fill-mode: forwards;
}

@keyframes page-cover {
  from {
    transform: scale(1, 1);
    border-radius: 50%;
    opacity: 0.5;
  }
  to {
    transform: scale(2000, 2000);
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class='overlay anime-page-cover'></div>
  <p>There goes my page content</p>
</body>

使用jQuery在空闲的鼠标上创建新的div

2 个答案: