我正在做一个游戏,涉及使用jQuery的点击和拖动。当您点击游戏div(红色)时,会出现一个黑色块,您可以拖动。我做了一个小提琴,在这里:jQuery与CSS转换mousemove
https://jsfiddle.net/r9pet266/6/
我想要的鼠标移动和块移动之间有轻微的延迟,所以我加了块上的CSS属性过渡。
只要您点击并拖动游戏div内的内容,该动作看起来很流畅,但一旦您在游戏div外单击并在内部点击并拖动,就会变得非常激动。
有人知道为什么吗?
HTML
<div id="outer">
<div id="game"></div>
<div id="instructions">
1. Click and drag inside the red box --> smooth <br>
2. Click on the green <br>
3. Click and drag inside the red box --> jumpy
</div>
</div>
CSS
#outer {
height: 500px;
background: green;
}
#instructions {
position: absolute;
top: 350px;
left: 100px;
}
#game {
position: relative;
display: inline-block;
width: 300px;
height: 270px;
background: red;
}
.block {
transition: 100ms;
position: absolute;
width: 80px;
height: 80px;
background: black;
}
的JavaScript:
var $block;
$('#game').mousedown(function (e) {
e.preventDefault();
$block = $('<div>');
$block.addClass('block');
updatePosition(e);
$('#game').append($block);
$('#game').mousemove(updatePosition);
$(window).one('mouseup', function() {
$block.remove();
$('#game').off('mousemove');
});
});
function updatePosition (e) {
$block.css('top', e.pageY - 45 + 'px');
$block.css('left', e.pageX - 45 + 'px');
}
为什么延误?试着去理解,这样我就可以看到是否有一种很好的替代方法。这绝对是你的过渡。 –
如果你改变你的过渡到10ms它会更平滑 –
@AlainNisam延迟是没有必要的,我只是好奇为什么会发生这种情况。对我来说,点击绿框后,即使1ms的过渡也会变得非常激动。 – McScott