Ondrag事件在我的HTML頁面底部創建空白

Question

我有一些代碼可以檢測光標是向左還是向右拖動，從而在一個圖像序列中循環（類似於現代創世紀網站及其旋轉的汽車）。

但是，每次調用該函數時，它都會在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

好吧，我發現解決該問題的方法完全不相關。 有一些JavaScript可用來消除拖動圖像時圖像重影的問題：

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);

一旦刪除了這段代碼，問題就不再發生了……現在看這段代碼，我可以理解為什么，我想我不應該熬夜並且像這樣編寫垃圾代碼。