移动图片错误-JavaScript

Question

After abt 2hrs or so, I managed to get the images moving, but i met with some issues: 经过大约2个小时的时间后，我设法移动了图像，但是遇到了一些问题：

1) Images move beyond the "bound" - image overlap is ok, but beyond the side of the browser 1）图片移出“边界”-可以重叠图片，但超出浏览器的范围

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 2）向右移动滚动条（0-> 20）使图像更靠近-确定，但是向左移动滚动条（20-> 0）不会将图像返回到原来的位置

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: 以下是“草稿” HTML代码：

<!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: 以下是Javascript代码：

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

Try the following JS. 试试下面的JS。 You dont seem to give a range for the movement of these images. 您似乎并未给出这些图像的运动范围。 I have added a limit which is the max value of your range control. 我添加了一个限制，即您的范围控制的最大值。 you can increase the value by increasing the max value of your slider 您可以通过增加滑块的最大值来增加值

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;

移动图片错误-JavaScript

问题描述

1 个解决方案

解决方案1
7 已采纳 2016-04-07 11:02:07

移动图片错误-JavaScript

问题描述

1 个解决方案

解决方案1 7 已采纳 2016-04-07 11:02:07

解决方案1
7 已采纳 2016-04-07 11:02:07