Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   изменение со временем (https://javascript.ru/forum/events/29374-izmenenie-so-vremenem.html)

supernet95 25.06.2012 18:10
изменение со временем
 
здравствуйте такой вопрос, что надо использовать для написания вот такой штуки.
<img src='/1.jpg' style="left: 13;" id="img1">
<img src='/2.jpg' onmouseover="left()">


<script>
var img1 = document.getElementById("img1");
function left(){
/ что прописать тут?
}
</script>

чтобы при наведении на 2 картинку у первой картинки значение left: 13; плавно изменилось на left: 26; при этом отображаться это должно как будто картинка едет слева на право.

Deff 25.06.2012 18:15
supernet95,
Самое простое, вторую картинку сделать гиф анимацией с однократным запуском (либо запустить аниме с помощью <marguee

supernet95 25.06.2012 18:27
Цитата:
Сообщение от Deff (Сообщение 183984)
supernet95,
Самое простое, вторую картинку сделать гиф анимацией с однократным запуском (либо запустить аниме с помощью <marguee
gif картинка не подходит так как картинка должна будет двигаться несколько раз на определённые дистанции при определённых условиях, тег <marqee> отпадает так как объект не должен постоянно прокручиваться, а точнее дойдя до определённого числового значения остановится

Deff 25.06.2012 18:31
Цитата:
Сообщение от supernet95
так как объект не должен постоянно прокручиваться, а точнее дойдя до определённого числового значения остановится
у <marquee> есть метод this.stop() и this.start() , привязав его к onmouseover/onmouseout элемента и вставив внутрь картинку - получим искомое

cyber 25.06.2012 18:53
а как насчет css3 анимации?
transition

bes 25.06.2012 19:58
на js
<img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">

<script>
window.onload = function () {
  var img = document.getElementsByTagName('img');
  var int;
  img[1].style.position = 'absolute';
  img[1].style.left = 100 + 'px';

  function goRight() {
    if (parseInt(img[1].style.left) < 120) {
      img[1].style.left = parseInt(img[1].style.left) + 1 + 'px'
    } else {
      clearInterval(int);
    }
  }

  function goLeft() {
    if (parseInt(img[1].style.left) > 100) {
      img[1].style.left = parseInt(img[1].style.left) - 1 + 'px'
    } else {
      clearInterval(int);
    }
  }

  img[0].onmouseover = function () {
    clearInterval(int);
    int = setInterval (goRight, 30);
  }

  img[0].onmouseout = function () {
    clearInterval(int);
    int = setInterval (goLeft, 30);
  }

}

</script>

supernet95 25.06.2012 20:01
Цитата:
Сообщение от cyber (Сообщение 184010)
а как насчет css3 анимации?
transition
Да, получилось, большое спасибо.

supernet95 25.06.2012 20:02
Цитата:
Сообщение от bes (Сообщение 184031)
на js
<img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">

<script>
window.onload = function () {
  var img = document.getElementsByTagName('img');
  var int;
  img[1].style.position = 'absolute';
  img[1].style.left = 100 + 'px';

  function goRight() {
    if (parseInt(img[1].style.left) < 120) {
      img[1].style.left = parseInt(img[1].style.left) + 1 + 'px'
    } else {
      clearInterval(int);
    }
  }

  function goLeft() {
    if (parseInt(img[1].style.left) > 100) {
      img[1].style.left = parseInt(img[1].style.left) - 1 + 'px'
    } else {
      clearInterval(int);
    }
  }

  img[0].onmouseover = function () {
    int = setInterval (goRight, 30);
  }

  img[0].onmouseout = function () {
    int = setInterval (goLeft, 30);
  }

}

</script>
ваш вариант мне тоже понравился, но он маленько будет посложней, огромное спасибо за написание кода, для наглядного примера.

cyber 25.06.2012 20:04
Цитата:
Сообщение от bes (Сообщение 184031)
на js
<img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">

<script>
window.onload = function () {
  var img = document.getElementsByTagName('img');
  var int;
  img[1].style.position = 'absolute';
  img[1].style.left = 100 + 'px';

  function goRight() {
    if (parseInt(img[1].style.left) < 120) {
      img[1].style.left = parseInt(img[1].style.left) + 1 + 'px'
    } else {
      clearInterval(int);
    }
  }

  function goLeft() {
    if (parseInt(img[1].style.left) > 100) {
      img[1].style.left = parseInt(img[1].style.left) - 1 + 'px'
    } else {
      clearInterval(int);
    }
  }

  img[0].onmouseover = function () {
    int = setInterval (goRight, 30);
  }

  img[0].onmouseout = function () {
    int = setInterval (goLeft, 30);
  }

}

</script>
если несколько раз быстро навести мышь(и убрать) на картинку запуска анимации , анимация виснет и больше не двигается:)

bes 25.06.2012 20:40
Цитата:
Сообщение от cyber
если несколько раз быстро навести мышь(и убрать) на картинку запуска анимации , анимация виснет и больше не двигается
Подправил

cyber 25.06.2012 21:39
Цитата:
Сообщение от bes (Сообщение 184052)
Подправил
всеравно css3 круче:)

cyber 25.06.2012 21:40
Цитата:
Сообщение от bes (Сообщение 184052)
Подправил
поставили Timeout на выполнение анимации?=)

bes 25.06.2012 21:46
Цитата:
Сообщение от cyber
всеравно css3 круче
я и не утверждал, что это самый лучший вариант

Цитата:
Сообщение от cyber
поставили Timeout на выполнение анимации?=)
не понял юмора :) (добавил остановку setInterval перед запуском основного кода обработчиков)

cyber 25.06.2012 21:48
Цитата:
Сообщение от bes (Сообщение 184079)
не понял юмора :) (добавил остановку setInterval перед запуском основного кода обработчиков)
не дописал=)
но имел ввиду

Цитата:
Сообщение от bes (Сообщение 184079)
(добавил остановку setInterval перед запуском основного кода обработчиков)


Часовой пояс GMT +3, время: 17:37.