Задача: При нажатии мышкой на картинку плавно заменить ее на другую, используя jQuery.
В данном примере хочу просто показать один из способов плавной смены двух картинок между собой на jQuery.
Для этого берем две картинки 1.gif, 2.gif и файлик, в котором все это будет происходить show-img.html :).
Рассмотрим show-img.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>jQuery img</title>
<script language="JavaScript1.2" src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#img").click(function () {
var src = $("#img").attr("src");
var tmp = $("#tmp").val();
$("#im").fadeOut("slow", function () {
$("#img").attr("src", tmp);
});
$("#im").fadeIn("slow");
$("#tmp").val(src);
});
});
</script>
</head>
<body>
<p id="im">
<img border="0" src="1.gif" id="img">
<input type="hidden" id="tmp" value="2.gif" >
</p>
</body>
</html>
Первым делом подключаем библиотеку jQuery, строка 06.
При нажатии мышкой на картинку выполняется скрипт с 11 по 19 строку, где сначала в переменную src мы сохраняем имя текущей картинки, строка 12. Затем в переменную tmp сохраняем значение скрытого поля для дальнейшей подстановки в путь картинки, строка 13. После этого делаем прозрачным элемент абзаца с id = "im" функцией fadeOut, строка 14 и меняем атрибут src, то бишь путь картинки с id = "img" на значение, которое хранится в переменной tmp, строка 15. И снова меняем прозрачность элемента с id = "im" функцией fadeIn, строка 17. В строке 18 мы меняем значение скрытого поля на путь к предыдущей картинке. Вот и все, теперь при следующем нажатии все повторяется, и картинки заменяются.
(голосов 3, в среднем: 3.33 из 5)
Loading ...
#1 Лимон - Июнь 18th, 2009 at 22:50
все круто – а как сделать чтобы при наведении мыши фон менялся?
как событие прописать?
#2 nice - Июнь 19th, 2009 at 10:49
как вариант менять стиль фона при mouseover.
#3 - Август 24th, 2009 at 03:13
$(document).ready(function(){
$(«#img»).mouseover(function () {
var src = $(«#img»).attr(«src»);
var tmp = $(«#tmp»).val();
$(«#im»).fadeOut(«fast», function () {
$(«#img»).attr(«src», tmp);
});
$(«#im»).fadeIn(«fast»);
$(«#tmp»).val(src);
});
$(«#img»).mouseout(function () {
var src = $(«#img»).attr(«src»);
var tmp = $(«#tmp»).val();;
$(«#im»).fadeOut(«slow», function () {
$(«#img»).attr(«src», tmp);
});
$(«#im»).fadeIn(«slow»);
$(«#tmp»).val(src);
});
});
#4 mitka_san - Январь 22nd, 2010 at 15:18
а реально этот скрипт адаптировать так чтоб смена картинок происходила не по нажатию на картинку, а по нажатию на ссылки, которые соответствуют кааждая своей картинке??
#5 nice - Январь 22nd, 2010 at 16:14
конечно реально.
вообще для программиста нет ничего нереального ))
#6 Ксения - Март 11th, 2010 at 03:42
А как прописать,чтоб менялись не две картинки,а допустим 16,друг за дружкой?
Заранее спасибо за ответ.