<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ZoomImage.aspx.cs" Inherits="ZoomImage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var cont_left = $("#container").position().left;
$("a img").hover(function() {
// hover in
$(this).parent().parent().css("z-index", 1);
$(this).animate({
height: "250",
width: "250",
left: "-=50",
top: "-=50"
}, "fast");
}, function() {
// hover out
$(this).parent().parent().css("z-index", 0);
$(this).animate({
height: "150",
width: "150",
left: "+=50",
top: "+=50"
}, "fast");
});
$(".img").each(function(index) {
var left = (index * 160) + cont_left;
$(this).css("left", left + "px");
});
});
</script>
<style type="text/css">
#container {
text-align: center;
position: absolute;
left: 260px;
margin-top: 150px;
width: 790px;
}
.img {
position: fixed;
z-index: 0;
}
.end {
margin-right: 0;
}
.clear {
clear: both;
}
.img a img {
position: relative;
border: 0 solid #fff;
}
</style>
</head>
<body>
<form id="form1" runat="server" class="end">
<div id="container">
<div class="img"><a href="#"><img src="Image/Chrysanthemum.jpg"/></a></div>
<div class="img"><a href="#"><img src="Image/Desert.jpg"/></a></div>
<div class="img"><a href="#"><img src="Image/Hydrangeas.jpg"/></a></div>
<div class="img"><a href="#"><img src="Image/Jellyfish.jpg"/></a></div>
<div class="img end"><a href="#"><img src="Image/Koala.jpg"/></a></div>
<div class="clear"></div>
</div>
</form>
</body>
</html>
No comments:
Post a Comment