当光标空闲并移动脉冲效果时

时间:2016-10-19 16:42:22

标签: javascript jquery html css

我想要它,所以当你移动光标几秒钟后移动光标时会产生一个脉冲效果。

<style type="text/css">
  body,
  a:hover {
    cursor: url(https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png), progress !important;
  }
</style>
<a href="https://www.google.com/" _blank " title=" ">
  <img src=" " border="0 " alt=" " style="position:absolute; top: 0px; right: 0px; " />
</a>

1 个答案:

答案 0 :(得分:0)

您可能有兴趣看看两个插件:

所以一个例子可能是:

$(function () {
  $(document.body).idleTimer({
    timeout: 1000,
    idle: true,
    events: 'mousemove'
  });
  $(document.body).on("active.idleTimer", function (event, elem, obj, triggerevent) {
    var ele = $(triggerevent.target);
    ele.pulse({backgroundColor: 'red'}, {pulses: 3}
             );
  });

});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://rawgit.com/thorst/jquery-idletimer/master/dist/idle-timer.min.js"></script>
<script src="https://rawgit.com/jsoverson/jquery.pulse.js/master/jquery.pulse.min.js"></script>


<a href="https://www.google.com/" title="">aaaaa</a>
<img        src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" border="0" alt=""
        style="position:absolute; top: 0px; right: 0px;"/>

<p>This is a paragraph</p>