Ondragイベントは、HTMLページの下部に空白を作成します

Question

カーソルが左または右にドラッグされているかどうかを検出するコードがあります。このコードでは、イメージシーケンス（Hyundai創世記ウェブサイトのものに似ていますその回転する車）。

しかし、evertime関数が呼び出されると、htmlページの下部に空白が作成されます。 これを引き起こしている可能性がありますか？ここで

は、配列に画像シーケンスをロードするためのJavascriptです：ここで

var cache = []; 
    function imgList(base,firstNum,lastNum) { 
    var imageFunction; 
     for(var i = firstNum;i <= lastNum; i++) { 
     imageFunction = new Image(); 

    if(i <=9){ var EXT = '000'} 
    else if(i <= 99){var EXT = '00'} 
    else if(i <= 999){var EXT = '0'} 
    else{var EXT = ''} 

    imageFunction.src = base + "." + EXT + i + ".png"; 
    cache.push(imageFunction); 
    console.log(cache.length); 
    } 

} 

は、ドラッグイベントが発生したときに呼び出されるJavaScriptの関数である。ここでは

var prevX = -1; 
var i = 0; 
var drgleft = 0; 
var drgright = 0; 

function sequence(event){ 

if(prevX == -1){ 
    prevX = event.pageX; 
    return false; 
    } 
    //drag left 
if(prevX > event.pageX){ 
    console.log('dragged left'); 
    drgleft++; 
    if(drgleft == 2){ 
    drgleft = 0; 
    i--; 
    if(i < 0){ 
    i = 30; //for optimization reasons, input the cache.length value manually (this avoids unnecessary errors in the console and laggy framerate as a result). 
    } 
    document.getElementById("TheBigOne").src = cache[i].src; //use  console.log(i); as a method of verifying that the code is executing correctly 
    } 
    } 
else if(prevX < event.pageX){ 
console.log('dragged right'); 
drgright++; 
if(drgright == 2){ 
drgright = 0; 
i++; 
if(i > 30){ //for optimization reasons, input the cache.length value manually (this avoids unnecessary errors in the console and laggy framerate as a result). 
     i=0; 
    } 
document.getElementById("TheBigOne").src = cache[i].src; 
    } 
} 
else{} 
prevX = event.pageX 
} 

はhtmlです：

<div class="The_main_event" ondrag="sequence(event)" id="PlaneTime"> 

<br/> 

    <img src="file:///C:/Users/Foo/Desktop/Website/Web_aeroplane/Web%20Test.0031.png" id="TheBigOne" class="planepic"> 

<br/> 

</div> 

Answer 1

画像の周囲に空白があると、その下に小さな隙間が表示されますそれがインライン要素である限り。これを修正するにはいくつかの方法がありますが、最も簡単な方法はブロックレベルの要素に変更することです。

これを試してみてください：

.planepic { 
    display: block; 
} 

は、ここで私は問題の解決策は完全に無関係なものだったデモ

div { 
 
    background: red; 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
} 
 
img { 
 
    max-width: 100px; 
 
} 
 
.block { 
 
    display: block; 
 
}

<div><img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png"></div> 
 

 
<div><img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="block"></div>

Answer 2

大丈夫です。私はこのコードを削除したら

document.getElementById("TheBigOne").addEventListener("dragstart", function(event) { 

var crt = this.cloneNode(true); 
crt.style.backgroundColor = ""; 
crt.style.opacity = "0"; /* or visibility: hidden, or any of the above */ 
document.body.appendChild(crt); 
event.dataTransfer.setDragImage(crt, 0, 0); 
}, false); 

は、問題が発生しなくなった... 今、このコードを見て：画像をドラッグした際の画像ゴーストの問題を除去するために使用したのjavascriptのビットがありましたなぜか理解できます。私は遅刻してこのようなコードを書くべきではないと思います。