<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery图片缩小效果-jQuery学习</title> <link href="http://hyipaying.com/css/Stylesheet_min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> h1{color:Green;} body{ background-color:#EEEEEE ; } .wrap{ width:200px; height:200px; margin:0px; overflow:hidden; position:relative; float:left; } .wrap a img{ border:none; position:absolute; top:-66.5px; left:-150px; height:500px; opacity: 0.5; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('.wrap img').hover( function () { $(this).stop().animate({ 'opacity': '1.0', 'height': '200px', 'top': '0px', 'left': '0px' }); }, function () { $(this).stop().animate({ 'opacity': '0.5', 'height': '500px', 'top': '-50px', 'left': '-150px' }); } ); }); </script> </head> <body> <h1>jQuery图片缩小效果</h1> <div style="width:400px;margin:30px 0"> <div class="wrap"> <a href="#"> <img src="http://hyipaying.com/images/demo/2010/anyixuan01.jpg" alt=""/> </a> </div> <div class="wrap"> <a href="#"> <img src="http://hyipaying.com/images/demo/2010/anyixuan03.jpg" alt=""/> </a> </div> <div class="wrap"> <a href="#"> <img src="http://hyipaying.com/images/demo/2010/anyixuan05.jpg" alt=""/> </a> </div> <div class="wrap"> <a href="#"> <img src="http://hyipaying.com/images/demo/215/anyixuan04.jpg" alt=""/> </a> </div> </div> </body> </html> .
