Necesito realizar que en el siguiente array se muevan proporcionalmente cada 5px de acuerdo a su posición original, pero que se detenga hasta un valor dado, en este caso si aumenta baja, si disminuye sube, es decir, cuando esta en 300 baje 10px, si esta en 100 se quede en su posición inicial, pero los botones todavía se pueden clickear sin que realice ninguna función pero no deshabilitar el botón igualmente si esta en 500 baje 20px y se clickea hacia arriba ya no se mueva porque ese es el limite. Los limites solo son 100 y 500, va de 100 en 100 y de los pixeles es de la posicion inical hasta 20 px. Todo el array es relativo a la clase, barco.
HTML
<body>
<div>
<div>
<img id="cielo" src="cielo.png">
<img id="fondoPaisaje"src="fondoPaisaje.png">
<img id="rio" src="agua.png">
<div id="barco">
<img id="barca_buena" src="Barca-buena.png">
<img id="layer" src="Layer-1.png">
<img id="objeto_1" src="objeto-1.png">
<img id="objeto_2" src="objeto-2.png">
<img id="escultura" src="escultura.png">
<img id="objeto_3" src="objeto-3.png">
<img id="barca_dentro" src="Barca-dentro.png">
<img id="barca_buena_reflejo" src="Barca-buena_reflejo.png">
</div>
</div>
<div class="botonera">
<p>m=</p>
<input type="numeric" name="campo_masa" value="100" id="masa" disabled="true">
<button id="btnarriba" disabled="false">▴</button>
<button id="btnabajo" disabled="false">▾</button>
<p>kg</p>
<p>a=</p><span id="aceleracion"></span><p>m/s<sup>2</sup></p>
<button id="btniniciar">Iniciar</button>
<button id="btnreiniciar">Reiniciar</button>
</div>
</div>
CSS
#barco{
position: relative;
z-index: 1;
margin-top: -200px;
margin-left: 100px;
padding: 0px;
display: block;
}
JAVASCRIPT JQUERY
$(document).ready(function(){
var fuerza = 600;
var value_masa=100;
$("#masa").val(value_masa);
var imagenes=[$("#objeto_1"),$("#objeto_2"),$("#escultura"),$("#objeto_3")];
$("#btniniciar").click(function(){
$("#btniniciar").hide();
$("#btnreiniciar").show();
$("#masa").prop("disabled",false);
$("#btnarriba").prop("disabled",false);
$("#btnabajo").prop("disabled",false);
});
function redondeo(valor_value){
if (isNaN(valor_value)){
return 100;
}
valor_value=(Math.round(valor_value/100))*100;
if(valor_value <= 100){
return 100;
}
if(valor_value >= 500){
return 500;
}
return valor_value;
}
function casos(valor_value){
var valor_value = (valor_value/100)-1;
for(var i=0; i < imagenes.length; i++){
imagenes[i].show();
if(valor_value <= i){
imagenes[i].hide();
}
}
return valor_value*100;
}
$("#btnarriba").on("click",function(){
value_masa=value_masa+100;
if(value_masa >= 500){
value_masa=500;
}
casos(value_masa);
$("#masa").val(value_masa);
});
$("#btnabajo").on("click",function(){
value_masa=value_masa-100;
if(value_masa <= 100){
value_masa=100;
}
casos(value_masa);
$("#masa").val(value_masa);
});
$("#btnreiniciar").on("click", function(){
value_masa=100;
casos(value_masa);
$("#masa").val(value_masa);
});
$("#masa").keydown(function(e){
if(e.which==13){
var valor_value=$("#masa").val();
var valor_redondeado=redondeo(valor_value);
casos(valor_redondeado);
$("#masa").val(valor_redondeado);
value_masa=valor_redondeado;
}
});
});