Показать сообщение отдельно
  #4 (permalink)  
Старый 07.05.2013, 23:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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>
Ответить с цитированием