<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Photo Zoom Out Effect with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Photo Zoom Out Effect with jQuery - Demonstation" />
<meta name="keywords" content="photo, image, zoom out, jQuery" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:#fff url(images/title.png) no-repeat 25% 20px;
}
.container{
width:600px;
height:400px;
margin:100px auto 0px auto;
border:10px solid #333;
-moz-box-shadow:1px 1px 12px #000;
-webkit-box-shadow:1px 1px 12px #000;
box-shadow:1px 1px 12px #000;
}
a.back{
width:184px;
height:32px;
position:absolute;
bottom:10px;
left:10px;
background:transparent url(images/back.png) no-repeat top left;
}
.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;
-moz-opacity: 0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
</style>
</head>
<body>
<div id="container">
<div>
<a href="http://www.flickr.com/photos/archetypefotografie/3601313864/">
<img src="http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/images/image1.jpg" alt="Picture 1"/>
</a>
</div>
<div>
<a href="http://www.flickr.com/photos/vegaseddie/3910559910/">
<img src="http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/images/image2.jpg" alt="Picture 2"/>
</a>
</div>
<div>
<a href="http://www.flickr.com/photos/62337512@N00/445175934/">
<img src="http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/images/image3.jpg" alt="Picture 3"/>
</a>
</div>
<div>
<a href="http://www.flickr.com/photos/brunociampi/2461177417/">
<img src="http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/images/image4.jpg" alt="Picture 4"/>
</a>
</div>
<div>
<a href="http://www.flickr.com/photos/beadmobile/3298460491/">
<img src="http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/images/image5.jpg" alt="Picture 5"/>
</a>
</div>
<div>
<a href="http://www.flickr.com/photos/tonythemisfit/3839281139/">
<img src="http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/images/image6.jpg" alt="Picture 6"/>
</a>
</div>
</div>
<div>
<a class="back" href="http://tympanus.net/codrops/2010/03/07/photo-zoom-out-effect-with-jquery/"></a>
</div>
<!-- The JavaScript -->
<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>
</body>
</html>
浙公网安备 33010602011771号