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

Question

I have some code that detects if the cursor is being dragged left or right which upon doing so, cycles through an image sequence (similar to that of the Hyundai genesis website and its rotating car).

However, evertime the function is called, it creates white space at the bottom of the html page. Any idea what might be causing this?

Here's the Javascript for loading the image sequence into the array:

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

}

Here is the Javascript function that is called when the drag event occurs:

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
 }

Here is the 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

If there is white space around an image, a small gap will appear underneath it as long as it is an inline element. There are a few ways to fix it, but the easiest is changing it to a block level element.

Try this:

.planepic {
  display: block;
}

Here's a demo

 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

Alright I found the solution to the issue was something completely unrelated. There was a bit of javascript which was used to remove the issue of the image ghosting when the image was dragged:

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

Once I removed this code, the issue ceased to occur... looking at this code now, I can understand why, I guess I shouldn't stay up so late and code rubbish like this.