編集: JSFiddle --> http://jsfiddle.net/mcD3h/2/
ユーザーが画面上の画像をパンできるようにするJavaScriptをいくつか作成しました。これは、Chrome、Firefox、および IE9 では正常に機能しますが、IE7 および IE8 では、マウス カーソルをドラッグすると、円に線が引かれます。誰かが理由を知っていますか?ここにいくつかのコードがあります:
$img.bind('mousedown', function (e) {
if (e.which == 1) {
$('body').addClass('mouseIsDown');
$img.data('leftMouseDownPos', { x: e.offsetX, y: e.offsetY });
e.preventDefault();
}
}).bind('mousemove', function (e) {
if (e.which == 1) {
//console.log('mousemove 1');
var dragFrom = $img.data('leftMouseDownPos');
if (
$('body').is('.mouseIsDown') && // IE Requires this for some reason - cant just rely on dragFrom being undefined
dragFrom &&
((dragFrom.x - e.offsetX > 0 && dragFrom.x - e.offsetX > 5) ||
(e.offsetX - dragFrom.x > 0 && e.offsetX - dragFrom.x > 5) ||
(dragFrom.y - e.offsetY > 0 && dragFrom.y - e.offsetY > 5) ||
(e.offsetY - dragFrom.y > 0 && e.offsetY - dragFrom.y > 5))) {
// The have dragged more than 5px so it probably isn't by acident
//console.log('drag: ' + e.offsetX + ':' + e.offsetY);
// Don't allow them to drag the image off screen
var newLeft = parseInt($img.css('marginLeft')) + e.offsetX - dragFrom.x;
//if (newLeft >= 0 && newLeft <= $img.width() - $img.parent().width())
$img.css({ marginLeft: newLeft + 'px' });
var newTop = parseInt($img.css('marginTop')) + e.offsetY - dragFrom.y;
//if (newTop >= 0 && newTop <= $img.height() - $img.parent().height())
$img.css({ marginTop: newTop + 'px' });
e.preventDefault();
}
}
}).bind('mouseup', function (e) {
$img.data('leftMouseDownPos', undefined);
$('body').removeClass('mouseIsDown');
switch (e.which) {
case 1:
{
// Zoom in on double left click
var lastUp = $img.data('lastLeftUp');
if (lastUp && Date.now() - lastUp < 500) {
zoom($img.data('zoomLevel') + 0.1, e.offsetX, e.offsetY);
}
$img.data('lastLeftUp', Date.now());
break;
}
case 2:
{
// Reset on middle click
$img.removeAttr('style').css({ maxHeight: $(window).height() * 0.98 + 'px' });
break;
}
case 3:
{
// Zoom out on double right click
var lastUp = $img.data('lastRightUp');
if (lastUp && Date.now() - lastUp < 500) {
// Zooping out around a certain point looks weird
//zoom($img.data('zoomLevel') - 0.1, e.offsetX, e.offsetY);
zoom($img.data('zoomLevel') - 0.1, undefined, undefined);
}
$img.data('lastRightUp', Date.now());
break;
}
}
e.preventDefault();
}).bind('contextmenu', function (e) {
e.preventDefault();
});
ズーム機能はすべて無視できます。各イベント IE で e.preventDefault() を実行しているため、ユーザーがドラッグしていることにさえ気付かないはずです。
どんな助けでも素晴らしいでしょう、
ジョー