Question

After abt 2hrs or so, I managed to get the images moving, but i met with some issues:

1) Images move beyond the "bound" - image overlap is ok, but beyond the side of the browser

2) Moving the scroll bar to the right (0 -> 20) makes the image move closer - OK but moving the scroll bar to the left (20 -> 0) does not return the images back to where they were

I seek you guys assistance to help debug and clean the code.

Thank You in advance :) and apologies for my weak sense of coding >.<

Images Used:

lion tail

lion head

Below is the "Draft" HTML Code:

<!DOCTYPE html>
<html>

   <head>
      <title>Moving Image</title> 
      <script src="./movingPicture.js" type="text/javascript"></script>
   </head>

   <body>
      <form>
         <img id="IMG_LEFT" src="./lion tail.gif" />
         <img id="IMG_RIGHT" src="./lion head.gif" />
         <p>Move the Bar to Move the Images Closer</p>
         <input type="range" min="0" max="100" value="0" steps="2" oninput="moveRight(value);"/>
      </form>
   </body>
</html>

Below is the Javascript Code:

var imgObjLeft = null;
var imgObjRight = null;

function init()
{
    imgObjLeft = document.getElementById('IMG_LEFT');
    imgObjLeft.style.position= 'relative'; 
    imgObjLeft.style.left = '0px'; 

    imgObjRight = document.getElementById('IMG_RIGHT');
    imgObjRight.style.position= 'relative'; 
    imgObjRight.style.left = '100px'; 
}

function moveRight(value)
{
    valueH = value/2;

    imgObjLeft.style.left = parseInt(imgObjLeft.style.left) + valueH + 'px';
    imgObjRight.style.left = parseInt(imgObjRight.style.left) - valueH + 'px';
}

window.onload =init;

Answer 1

尝试以下JS。你似乎没有给这些图像的移动范围。我添加了一个限制，它是范围控制的最大值。您可以通过增加滑块的最大值来增加该值

var imgObjLeft = null;
var imgObjRight = null;

function init() {
  imgObjLeft = document.getElementById('IMG_LEFT');
  imgObjLeft.style.position = 'relative';
  imgObjLeft.style.left = '0px';

  imgObjRight = document.getElementById('IMG_RIGHT');
  imgObjRight.style.position = 'relative';
  imgObjRight.style.left = '100px';
}

function moveRight(value) {
  valueH = value;
  imgObjLeft.style.left = valueH + 'px';
  imgObjRight.style.left = (100 - valueH) + 'px';
}

window.onload = init;

Moving Pictures Bugs - JavaScript

1 个答案: