Hello, how on JS or using html to make the movement of the picture when loading the page? Those. not by clicking on it, but simply when the page opens, the picture would smoothly move from the upper left to the lower left (for example)

Thanks in advance for your help

    2 answers 2

    jQuery(document).ready(function(){ //ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы jQuery("#img").animate({left: "+=160"}, 1000); //ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° двиТСтся ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ })

    just need to connect the jQuery library

    • 2
      Movement on the diagonal consists of horizontal and vertical movements, respectively. - out

     var curPosX = 0; var curPosY = 0; var interval; var n = 10; // На сколько Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒ Π·Π° Ρ€Π°Π· var width = document.documentElement.clientWidth; // Π¨ΠΈΡ€ΠΈΠ½Π° экрана var height = document.documentElement.clientHeight; // Высота экрана var imgWidth = 100; // Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ var imgHeight = 100; // Высота ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ var img1 = document.getElementById("img1"); function move() { img1.style.left = (curPosX += n) + "px"; img1.style.top = (curPosY += n) + "px"; if ((curPosX == (width - imgWidth)) || (curPosY == (height - imgHeight))) { clearInterval(interval); } } interval = setInterval(move, 100); 
     #img1 { position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; background-color: #000000; } 
     <img id="img1" src="">

    • Post 3 years. Already you can add a variant about CSS3. - Sergiks