Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.05.2013, 13:17
Аспирант
Отправить личное сообщение для Dimanchik87 Посмотреть профиль Найти все сообщения от Dimanchik87
 
Регистрация: 04.03.2013
Сообщений: 48

появление картинки
Есть менюшка с картинками,при наведении на картинку в другом месте возникает её увеличенная копия,при потере курсора копия уменьшается и исчезает.
Вопрос в том,почему появляется копия,а назад никак.
Попытался выводить 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);
}
Ответить с цитированием
  #2 (permalink)  
Старый 07.05.2013, 21:21
Аспирант
Отправить личное сообщение для Dimanchik87 Посмотреть профиль Найти все сообщения от Dimanchik87
 
Регистрация: 04.03.2013
Сообщений: 48

неужели никто ничего не подскажет
Ответить с цитированием
  #3 (permalink)  
Старый 07.05.2013, 21:25
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Dimanchik87, отформатируйте код используя теги , и было бы не плохо добавить пример, тогда посмотрю или жди кого то кто так будет смотреть)
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #4 (permalink)  
Старый 07.05.2013, 23:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

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>
Ответить с цитированием
  #5 (permalink)  
Старый 07.05.2013, 23:36
Аспирант
Отправить личное сообщение для Dimanchik87 Посмотреть профиль Найти все сообщения от Dimanchik87
 
Регистрация: 04.03.2013
Сообщений: 48

огромное спасибо за ответ,я сделал по другому,но ваш вариант намного круче.Если кто-нибудь объяснит как вставлять код для просмотра на этот форум,покажу свой вариант
Ответить с цитированием
  #6 (permalink)  
Старый 07.05.2013, 23:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

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

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


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #7 (permalink)  
Старый 08.05.2013, 00:02
Аспирант
Отправить личное сообщение для Dimanchik87 Посмотреть профиль Найти все сообщения от Dimanchik87
 
Регистрация: 04.03.2013
Сообщений: 48

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);
	
	}
Ответить с цитированием
  #8 (permalink)  
Старый 08.05.2013, 00:05
Аспирант
Отправить личное сообщение для Dimanchik87 Посмотреть профиль Найти все сообщения от Dimanchik87
 
Регистрация: 04.03.2013
Сообщений: 48

подскажите как сделать,чтобы пока одна картинка не исчезла,событие на другой не происходило
Ответить с цитированием
  #9 (permalink)  
Старый 08.05.2013, 00:45
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

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>
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.

Последний раз редактировалось cyber, 08.05.2013 в 09:25.
Ответить с цитированием
  #10 (permalink)  
Старый 08.05.2013, 01:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
плавное появление картинки marlic Элементы интерфейса 1 12.03.2011 15:36
скрол мышкой картинки внутри слоя snk Элементы интерфейса 7 07.09.2010 18:22
Получение координат от картинки EmDmAl Events/DOM/Window 4 08.11.2009 14:34
Как изменить размер картинки? Mihail Общие вопросы Javascript 1 25.10.2009 13:42
Появление картинки и области-ссылки на ней John Общие вопросы Javascript 4 08.05.2008 00:41