Показать сообщение отдельно
  #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.
Ответить с цитированием