افکت زوم بر روی تصاویر

ایجاد افکت زوم تصاویر با استفاده از این پلاگین جی کوئری

آموزش استفاده

قبل از تگ <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>

دیدگاه‌ خود را بنویسید لغو پاسخ