Текст фото движется по окну

HTML ↴

<!DOCTYPE HTML><html><head>
<meta charset="windows-1251">
<title>Текст фото движется по окну</title>

</head><body>
<script type="text/javascript"> 
  var id = setInterval(function(){ 
    var idt = document.getElementById('timer'); 
    idt.innerHTML = parseInt(idt.innerHTML) + 1; 
    var txt = document.getElementById('txt'); 
    var ids = document.getElementById('id_size'); 
    var size = parseInt(ids.innerHTML); 
    var idx = document.getElementById('id_x'); 
    var x = parseInt(idx.innerHTML); 
    var idy = document.getElementById('id_y'); 
    var y = parseInt(idy.innerHTML); 
    var idl = document.getElementById('id_lr'); 
    var lr = parseInt(idl.innerHTML); 
    if(x >= size && y >= size) 
    { 
      idl.innerHTML = 1; 
      lr = 1; 
    } 
    if(lr == 0) 
    { 
      if(x < size) 
      { 
        idx.innerHTML = x + 1; 
        txt.style.paddingLeft = x; 
      } 
      else if(y < size) 
      { 
        idy.innerHTML = y + 1; 
        txt.style.paddingTop = y; 
      } 
    } 
    else 
    { 
      if(y > 0 && x > 0) 
      { 
        idx.innerHTML = x - 1; 
        txt.style.paddingLeft = x; 
      } 
      else if(y > 0) 
      { 
        idy.innerHTML = y - 1; 
        txt.style.paddingTop = y; 
      } 
      else 
      { 
        clearInterval(id); 
      } 
    } 
  }, 20); 
</script>
<div>size = <span id='id_size'>400</span>, 
     x = <span id='id_x'>0</span>, 
     y = <span id='id_y'>0</span>, 
     lr = <span id='id_lr'>0</span>, 
     timer = <span id='timer'>0</span></div> 
<div id='txt'>Заданный текст <br><img src="http://www.03www.su/pic/021.jpg" alt="" width="100px"></div>
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

HTML ↴

размер Kb

ПРИМЕР ↴ (смотреть в отдельном окне)

✔ пример в полном окне