Question

我有一些代码可以检测光标是向左还是向右拖动，这样做会循环显示图像序列（类似于现代创世网站及其旋转车的图像序列）。

然而，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

好吧我发现这个问题的解决方案完全不相关。有一些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);

删除此代码后，问题就不复存在了...... 现在看这个代码，我能理解为什么，我想我不应该这么晚熬夜并像这样编码垃圾。

Ondrag事件在我的HTML页面底部创建了空格

2 个答案: