Форум

nalezhitiy · #1 (**permalink**) 23.11.2010, 18:42

Здравствуйте,
в javascript и jquery слабо ориентируюсь. написал маленький код для фото галереи

<ul >
<li><a href="" class="run1">foto 1</a></li>
<li><a href="" class="run2">foto 2</a></li>
<li><a href="" class="run3">foto 3</a></li>
</ul>
<div >
<img src="images/2.png" id="img3" style="position:relative; " />
<img src="images/3.png" id="img2"  style="position:relative; margin-top:-390px; "/>
<img src="images/1.png" id="img1" style="position:relative; margin-top:-690px;z-index:1; " />
</div>

jquery

<style>
.z {z-index:1;} 
 </style>

<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
						    var a = 0;
							var b = 1;
							var c = 2;
		$(".run1").mouseover(function(){
	    $("#img1").animate({ left: "500", opacity: "0.3"}, "slow", function() {$(this).css('z-index', a);} )
	.animate({left: "0", opacity: "1"}, "slow")
	 	 return false;
	      }); 
		$(".run2").mouseover(function(){
	    $("#img2").animate({ left: "500", opacity: "0.3"}, "slow", function() {$(this).css('z-index', b);} )
	.animate({left: "0", opacity: "1"}, "slow")
	      return false; }); 
		$(".run3").mouseover(function(){
	    $("#img3").animate({ left: "500", opacity: "0.3"}, "slow", function() {$(this).css('z-index', c);} )
	.animate({left: "-50", opacity: "1"}, "slow")
	      return false; }); 
		});


</script>

Идея была в том что все фото лежат под одной фотографией. при наведении на ссылку определенное фото с эффектов выезжала и становилась над всеми. Но когда я навожу обратно на ссылки то переход не происходит((((
Помогите начинающему

рони · #2 (**permalink**) 24.11.2010, 05:16

Вариант

<!DOCTYPE html>
<html>
<head>
  <title></title>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$("a").mouseover(function(){
$("img").css('z-index', -1)
$("img."+$(this).attr("class")+"").animate({ left: "500", opacity: "0.3"}, "slow", function() {$(this).css('z-index', 1);} )
.animate({left: "0", opacity: "1"}, "slow")
return false;
});
});
</script>
</head>

<body>
<ul >
<li><a href="" class="run3">foto 1</a></li>
<li><a href="" class="run2">foto 2</a></li>
<li><a href="" class="run1">foto 3</a></li>
</ul>
<div  style="position:  absolute ;left: 100px; top: 10px;">
<img class="run1" src="http://img.files.7ja.ru/pics-big/99.jpg" id="img3" style="position: absolute ;  " />
<img class="run2" src="http://www.dostavka-buketov.ru/imag/df156.jpg" id="img2" style="position:absolute;"/>
<img class="run3" src="http://www.buket.co.ua/planet/srez_cvety/____182.jpg" id="img1" style="position:absolute;  " />
</div>
</body>
</html>

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Форум

Справочник

Discord чат

Курсы javascript