動画のバグ - JavaScriptの - 優秀な図書館

ABT 2時間かそこらの後、私は画像が移動を取得するために管理が、私はいくつかの問題に会った：動画のバグ - JavaScriptの

1）画像が「バウンド」を越えて移動 - 画像の重なりでOK、しかし越えてスクロールバーを右（0 - > 20）に動かすと、画像がより近くに移動します。 - OK スクロールバーを左（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>

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;

出典

2016-04-07 AHK

フィドルを追加できますか？ – Batman

次の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;

出典

2016-04-07 11:02:07

ここでは、フィドルですhttps://jsfiddle.net/zexzx394/ –

更新@ TomMettamのフィドルhttps://jsfiddle.net/zexzx394/1/ –

@Rohit合意これを行うためのシンプルでクリーンな方法...いい1つ（y） –

動画のバグ - JavaScriptの

答えて

関連する問題