移动图片错误 - JavaScript

Question

移动图片错误 - JavaScript

AHK*_*AHK 0 html javascript

经过2个小时左右,我设法让图像移动,但我遇到了一些问题:

1)图像移动超出"绑定" - 图像重叠是可以的,但超出浏览器的一侧

2)向右移动滚动条(0 - > 20)使图像移近 - 好但是向左移动滚动条(20 - > 0)不会将图像返回到原来的位置

我寻求你帮助调试和清理代码.

提前谢谢你:)并为我的弱编码意识道歉>.<

使用的图像:

狮子尾巴

狮子头

以下是"草稿"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>

Run Code Online (Sandbox Code Playgroud)

以下是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;

Run Code Online (Sandbox Code Playgroud)

Answer 1

Roh*_*gre 7

试试以下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;

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，7 月前
查看次数：	71 次
最近记录：	9 年，7 月前