resize image as days go by "counter"

Question

resize image as days go by "counter"

Navigation

#1 by (5 votes)

4

I have a counter that shows an image of a planet underneath and I would like it to grow 5 px on each side as time goes by. Could someone help me or give some clue how to do it in JavaScript?

This code is what I use for the counter:

$("#countdownDays").countdown("2017/01/31", function(event) {
    $(this).text( event.strftime('%D') );
});


      <div class="info-item">
    <div>
        <div id="countdownDays" class="contador">
        </div>
        <div>
            <p class="info-text">DAYS</P>
        </div>
    </div>
    <div>
        <span class="item">:</span>
    </div>
    <div>
        <div id="countdownHours" class="contador">
        </div>
        <div>
            <p class="info-text">HOURS</P>
        </div>
    </div>
    <div>
        <span class="item">:</span>
    </div>
    <div>
        <div id="countdownMin" class="contador">
        </div>
        <div>
            <p class="info-text">MINS</P>
        </div>
    </div>
    <div>
        <span class="item">:</span>
    </div>
    <div>
        <div id="countdownSecs" class="contador">
        </div>
        <div>
            <p class="info-text">SECS</P>
        </div>
    </div>
</div>
<div>
    <img src="../Projecto_contador/imagenes/shutterstock_311198186.jpg" class="image" id="resize">
</div>

javascript jquery

asked by ericmf 24.10.2016 в 10:34

source

1 answer

Problem print in cycle for Where do the values of the following variables come from?

score 5 · Answer 1

What you want to do will depend a lot on one or two factors:

The start / end size of the image
The time interval in which growth will take place

If the start size is the actual size of the image, you will need to define a time interval in which the increments of + 5px / day will be made (right now you have the target date X, you would need a date of origin Y, to be able to calculate growth).

If the final size is the actual size of the image, then you do not need an interval, because it is already limited by the size of the image and it would be size / 5 days.

Once that decision is made, you will have a number that will represent the number of days in which the image will grow. From there, the logic is simple (although it will change slightly from one method to the other).

I'm going to build on that the starting size is the actual size of the image and it grows as the days go by and the counter approaches zero. The algortimo would be something like this:

Get the number of days in the countdown (I'll call it Remaining) using the function you already have in countDown .

Get the number of days the image will change in size (I'll call it Totals). This value must really have it from before.

If Totales <= Restantes means that we have not yet reached the time in which the image grows, so nothing would be done. Skip to step 6.

If Totales > Restantes , means that the countdown has already started / ended ( countDown returns 0 if the countdown has already ended), then:

Calculate the total increase, which would be tamaño imagen + Totales*5

Change the size of the image to be the new size

End

And the code could be something like this:

// definimos los días totales
var diasTotales = 100;

// tamaño real de la imagen
var tamaReal = 0;

$("#countdownDays").countdown("2017/01/31", function(event) {

  // obtenemos los días restantes
  var diasRestantes = parseInt(event.strftime('%D'));

  // los escribimos por pantalla
  $(this).text( diasRestantes );

  // si estamos dentro del rango de crecimiento diasRestantes < diasTotales
  if (diasRestantes < diasTotales) {
    // si no se ha calculado antes, obtenemos el tamaño real de la imagen
    // para evitar que se recalcule el tamaño una vez redimensionada la imagen
    if (tamaReal == 0) { tamaReal = $("#resize").width(); }

    // calculamos el nuevo tamaño
    var nuevoTama = tamaReal + (diasTotales - diasRestantes)*5;
    $("#resize").width( nuevoTama );
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>

<div class="info-item">
  <div>
    <div id="countdownDays" class="contador">
    </div>
    <div>
      <p class="info-text">DAYS</P>
  </div>
</div>

<div>
  <img src="http://i.imgur.com/Zxwanjt.jpg" class="image" id="resize">
</div>