- 此问题在此处已有答案**:
11年前关闭了。
- 可能重复:**
jQuery: Detecting click-and-hold
我正在寻找一些方法有一个img,当我按住图像可能1或2秒,jQuery更改CSS为"显示","块"...我已经找了又找,找不到我需要的。请给最好的答案可能。我正在做一个手指扫描应用程序...:)这里是我现在的代码:
超文本:
<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>
2条答案
按热度按时间ulydmbyx1#
添加一个“mousedown”处理程序到你的图像,它设置一个两秒后的触发函数和一个“mouseup”函数,它清除超时函数。例如:
下面是一个要 Boot 的working jsFiddle demo。
cnjp1d6j2#
如果你认为你会经常这样做,你可以做一个插件(好吧..所以我对此很感兴趣)。
以下是调用代码:
下面是插件:
查看实际应用:http://jsfiddle.net/natedavisolds/Nb7zQ/1/