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