0

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">&#x25B4</button>
                <button id="btnabajo" disabled="false">&#x25BE</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;
    }
});
});

1 respuesta 1

0

Viendo tu código he hecho una modificación rápida para conseguir el efecto que quieres, aprovechando tu función casos(valor_value), que recibe como parámetro el valor del input, mediante ese parámetro hago el cálculo para el margen que quieres var margen = valor_value/20-5;, y luego ese margen lo aplicas a los elementos del array, aquí tienes tu ejemplo con las modificaciones indicadas:

$(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){
  
  // CODIGO AÑADIDO:
    var margen = valor_value/20-5;
    imagenes[0].css("margin-top",margen);
    imagenes[1].css("margin-top",margen);
    imagenes[2].css("margin-top",margen);
    imagenes[3].css("margin-top",margen);

  
  
    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;
    }
});
});
#barco{
position: relative;
z-index: 1;
  /* He quitado los -200 px de margin top para que puedas ver el ejemplo */
margin-top: 0px;
margin-left: 100px;
padding: 0px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="https://picsum.photos/100/100/?random">
                <img id="objeto_2" src="https://picsum.photos/100/100/?random">
                <img id="escultura" src="https://picsum.photos/100/100/?random">
                <img id="objeto_3" src="https://picsum.photos/100/100/?random">
                <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">&#x25B4</button>
                <button id="btnabajo" disabled="false">&#x25BE</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>

2
  • creo me falto eso aclararlo y ponerlo en la publicación, todo esta relativo a mi objeto barco, en el codigo que agregaste ahi cada imagen la va a estar bajando ya sea 5 hasta 20px a su posición original el 27 jul. 2018 a las 16:01
  • No te he entendido bien, has dicho que en mi ejemplo cada imagen irá bajando de 5 hasta 20 px de su posición original, pero eso es lo que quieres, ¿no?. Eso he entendido en tu pregunta y en mi ejemplo eso es lo que pasa. el 28 jul. 2018 a las 17:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.