Question

可能重复：
jQuery: Detecting click-and-hold

我正在寻找一种方法来获得一个img，当我按住图像大概1或2秒时，jQuery将CSS更改为“display”，“block”...我已经看了，看了就可以了找不到我需要的东西。请尽可能给出最好的答案。我正在制作一个手指扫描应用程序...... :)这是我现在的代码：

HTML：

<body>
  <img id="testlaser" src="images/Laser.gif">
  <div class="fingerprint">
  </div>
  <img class="access_denied" src="images/AccessDenied.jpg">
</body>

CSS：

<style>
       body{-webkit-user-select: none;overflow:hidden;scrolling:no;}
  #testlaser{height:100%;width:100%;position:absolute;display:none;}
      .fingerprint{display:block;position:absolute;background-image:url(images/fingerprint.gif);background-repeat:no-repeat;background-position:center center;text-align:center;width:100%;height:90%}
      .access_denied{display:none;background-position:center center;width:100%;height:100%;}
        .access_granted{display:none;background-position:center center;width:100%;height:100%;}
</style>

Java脚本：

<script>
$(".fingerprint").click('click mousedown', function(){
  $("#testlaser").css("display","block")
    $(".fingerprint").css("display","block")
      setTimeout(function(){
  $("#testlaser").css("display","none")
    $(".fingerprint").css("display","none")
    $(".access_denied").css("display","block")
},10000);
});
$(".access_denied").click(function(){
     $("#testlaser").css("display","none")
     $(".fingerprint").css("display","block")
     $(".access_denied").css("display","none")
});
</script>

提前致谢!!!

Answer 1

为你的图像添加一个“mousedown”处理程序，它在两秒后设置一个触发器函数和一个清除超时功能的“mouseup”函数。例如：

(function() {
  var foo=$('#foo'), tf=null;
  foo.mousedown(function() {
    tf = setTimeout(function() {
      alert('Two seconds!');
    }, 2000);
  });
  foo.mouseup(function() {
    clearTimeout(tf);
  });
})();

这是一个working jsFiddle demo来启动。

Answer 2

如果你认为你会做很多事情你可以制作一个插件（好吧..所以我对此很感兴趣）。

这是调用代码：

$('.fingerprint').delayedReaction(function() { 
    $(".fingerprint").hide();
    $(".access_denied").show();
});

$(".access_denied").click(function() {
    $(".fingerprint").show();
    $(".access_denied").hide();
});

这是插件：

(function($){
    $.fn.delayedReaction = function(successFunction, options) {
        var settings = $.extend({}, $.fn.delayedReaction.defaults, options);

        this.each(function() {
            var timeout,
                myFunction = successFunction,
                $this = $(this);

            var run_func = function() {
                myFunction.apply($this)
            };

            $this.bind(settings.startEvent, function() {
                timeout = setTimeout(run_func, settings.delayFor);
            });

            $this.bind(settings.stopEvent, function() {
                clearTimeout(timeout);
                timeout = null;
            });
        });

        return this;
    }

    $.fn.delayedReaction.defaults = {
        startEvent: 'mousedown',
        stopEvent: 'mouseup mouseleave',
        delayFor: 3000
    }

})(jQuery);

查看实际操作：http://jsfiddle.net/natedavisolds/Nb7zQ/1/

我可以举办一个活动：

2 个答案: