基本上,我有这个带有左右箭头按钮的图像。该图像默认是我从某些 gif 中提取的第一帧,原始 gif 包含 31 帧。我的目标是当用户单击向右箭头按钮时,我想显示下一帧等等...一切都运行良好,如下面的代码所示。但是,我需要添加一些鼠标按住事件,以便当用户单击并按住鼠标时,我想继续触发下一个图像。我怎样才能实现这个目标?
$('#arrow_right').click(function (event) {
event.preventDefault();
var data_id = parseInt($(this).parent().find('#inner_wrap img').attr('data-id'));
if (data_id >= 1 && data_id <= 30) {
data_id = data_id + 1;
var avatar_num = $('#inner_wrap').html('<img id="avatar" data-id="' + data_id + '" src="img/avatar_test' + data_id + '.gif" width="90" height="200">');
}
});
那么你可以使用mousedown
启动显示 gif 帧的函数的事件:http://api.jquery.com/mousedown/然后添加另一个事件处理程序mouseup
将停止该功能的事件。该函数可以通过调用setInterval()
in the mousedown
- 例如事件并通过以下方式停止clearInterval()
in the mouseup
event.
这是一个展示原理的例子:
var interval;
$(button).addEventListener('mousedown',function(e) {
interval = setInterval(function() {
// here goes your code that displays your image/replaces the one that is already there
},500); // 500ms between each frame
});
$(button).addEventListener('mouseup',function(e) {
clearInterval(interval);
});
// Thank you, Timo002, for your contribution!
// This code will stop the interval if you move your mouse away from the button while still holding it.
$(button).addEventListener('mouseout',function(e) {
clearInterval(interval);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)