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

一旦删除了这段代码，问题就不再发生了……现在看这段代码，我可以理解为什么，我想我不应该熬夜并且像这样编写垃圾代码。