ایجاد افکت زوم تصاویر با استفاده از این پلاگین جی کوئری
آموزش استفاده
- قبل از تگ <head/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
- بعد از تگ <body>
<div id="container" class="container"> <div class="wrap"> <a href="http://www.flickr.com/photos/archetypefotografie/3601313864/"> <img src="images/image1.jpg" alt="Picture 1"/> </a> </div> <div class="wrap"> <a href="http://www.flickr.com/photos/vegaseddie/3910559910/"> <img src="images/image2.jpg" alt="Picture 2"/> </a> </div> <div class="wrap"> <a href="http://www.flickr.com/photos/62337512@N00/445175934/"> <img src="images/image3.jpg" alt="Picture 3"/> </a> </div> <div class="wrap"> <a href="http://www.flickr.com/photos/brunociampi/2461177417/"> <img src="images/image4.jpg" alt="Picture 4"/> </a> </div> <div class="wrap"> <a href="http://www.flickr.com/photos/beadmobile/3298460491/"> <img src="images/image5.jpg" alt="Picture 5"/> </a> </div> <div class="wrap"> <a href="http://www.flickr.com/photos/tonythemisfit/3839281139/"> <img src="images/image6.jpg" alt="Picture 6"/> </a> </div> </div> <!-- The JavaScript --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('#container img').hover( function(){ var $this = $(this); $this.stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'}); }, function(){ var $this = $(this); $this.stop().animate({'opacity':'0.5','height':'500px','top':'-66.5px','left':'-150px'}); } ); }); </script>