Форум

Dimanchik87 · #1 (**permalink**) 07.05.2013, 13:17

Есть менюшка с картинками,при наведении на картинку в другом месте возникает её увеличенная копия,при потере курсора копия уменьшается и исчезает.
Вопрос в том,почему появляется копия,а назад никак.
Попытался выводить alertом созданный объект(new_img),выводит аж 14 раз.
Вот код
jQuery.each(img, function(){
img.on("mouseover",zoom)
});//всем картинкам подключаю событие
var new_img//глобальная переменная для созданной копии
function zoom (event){

var img=$(event.target)
img.off("mouseover",zoom);
new_img=img.clone();//создаю копию той картинки на которой произошло событие
$("body").append(new_img);
new_img.css("position","fixed");
new_img.css("top","100px");
new_img.css("left","300px");
new_img.css("height","30px");
new_img.css("width","30px");
new_img.css("zIndex","4");

new_img.animate({height:300,width:300},750);
img.on("mouseout",zoom_out);

};
function zoom_out (event){
var img=$(event.target)
img.off("mouseout",zoom_out);
new_img.animate({height:30,width:30},750);
new_img.remove();
img.on("mouseover",zoom);
}

Dimanchik87 · #2 (**permalink**) 07.05.2013, 21:21

неужели никто ничего не подскажет

cyber · #3 (**permalink**) 07.05.2013, 21:25

Dimanchik87, отформатируйте код используя теги , и было бы не плохо добавить пример, тогда посмотрю или жди кого то кто так будет смотреть)

рони · #4 (**permalink**) 07.05.2013, 23:24

Dimanchik87,
Вариант ...

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">
<script>
$("body").on({"mouseenter":zoom," mouseleave":zoom_out},"img" ) ;//всем картинкам подключаю событие
var new_img//глобальная переменная для созданной копии
function zoom (){
 if(new_img) new_img.attr({"src": $(this).attr("src")}).stop();
 else new_img=$(this).clone();//создаю копию той картинки на которой произошло событие
 $("body").append(new_img);
 new_img.off("mouseenter mouseleave")
 new_img.css("position","fixed");
 new_img.css("top","100px");
 new_img.css("left","300px");
 new_img.css("height","30px");
 new_img.css("width","30px");
 new_img.css("zIndex","4");
 new_img.animate({height:300,width:300},750);
 };
 function zoom_out (){
 new_img.stop().animate({height:30,width:30},750,function ()
{
  new_img.remove()
})

 }
</script>
<img src="http://javascript.ru/img/ws_1.png" alt="">
</body>

</html>

Dimanchik87 · #5 (**permalink**) 07.05.2013, 23:36

огромное спасибо за ответ,я сделал по другому,но ваш вариант намного круче.Если кто-нибудь объяснит как вставлять код для просмотра на этот форум,покажу свой вариант

рони · #6 (**permalink**) 07.05.2013, 23:47

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

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

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

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

Dimanchik87 · #7 (**permalink**) 08.05.2013, 00:02

img.on("mouseover",zoom)

	function zoom (event){
	var img=$(event.target)
	img.off("mouseover",zoom);
	new_img=img.clone();
	new_img.addClass("pict1");
	$("body").append(new_img);
	new_img.css("position","fixed");
	new_img.css("top","100px");
	new_img.css("left","300px");
	new_img.css("height","30px");
	new_img.css("width","30px");
	new_img.css("zIndex","4");
	
	
	new_img.animate({height:300,width:300},750);
	img.on("mouseout",zoom_out);
	
	};
	function zoom_out (event){
	var img1=$(event.target)
	img.off("mouseout",zoom_out);
	$(".pict1").animate({height:30,width:30},750,function(){$(".pict1").remove();});
	img.on("mouseover",zoom);
	
	}

Dimanchik87 · #8 (**permalink**) 08.05.2013, 00:05

подскажите как сделать,чтобы пока одна картинка не исчезла,событие на другой не происходило

cyber · #9 (**permalink**) 08.05.2013, 00:45

Dimanchik87,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">
<script>


!function (){  
  
$("body").on({"mouseenter":zoom," mouseleave":zoom_out},"img" ) ;//всем картинкам подключаю событие  
  
var new_img, active = false;
  
function zoom (){
  
  if(active) return;
  
  active = true;
  
  if(new_img)
  {
    new_img.attr({"src": $(this).attr("src")}).stop();
  }
  else {
   
    new_img=$(this).clone();//создаю копию той картинки на которой произошло событие
  }
  
 $("body").append(new_img);
 new_img.off("mouseenter mouseleave")
 new_img.css("position","fixed");
 new_img.css("top","100px");
 new_img.css("left","300px");
 new_img.css("height","30px");
 new_img.css("width","30px");
 new_img.css("zIndex","4");
  
  new_img.animate({height:300,width:300},750);
  
 };
  
  
 function zoom_out (){
 new_img.stop().animate({height:30,width:30},750,function (){
  
   active = false;
   
   new_img.remove();
  
})

 }
  }();
</script>
<img src="http://javascript.ru/img/ws_1.png" alt="">
</body>

</html>

рони · #10 (**permalink**) 08.05.2013, 01:02

cyber,
возле run в теге html добавьте через пропуск height=500 а то картинок невидно

Форум

Справочник

Discord чат

Курсы javascript