/Files/Snowfun/zoomer.for.jquery-1.0.zip
<!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 id="Head1" runat="server">
<title>无标题页</title>
<script type="text/javascript" language="javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="zoomer.css" media="screen" />
<meta http-equiv="Content-Language" content="fr" />
</head>
<body>
<div id="page">
<center>
</center>
<br><br><br>
<div id="content">
<div class="container">
<ul class="thumb">
<li><a href="#"><asp:Image ID="Image1" runat="server" ImageUrl="~/Img/IMG_9484.JPG"/></a></li>
<li><a href="#"><asp:Image ID="Image2" runat="server" ImageUrl="~/Img/IMG_9486.JPG"/></a></li>
<li><a href="#"><asp:Image ID="Image3" runat="server" ImageUrl="~/Img/IMG_9487.JPG"/></a></li>
<li><a href="#"><asp:Image ID="Image4" runat="server" ImageUrl="~/Img/IMG_9488.JPG"/></a></li>
<li><a href="#"><asp:Image ID="Image5" runat="server" ImageUrl="~/Img/IMG_9490.JPG"/></a></li>
<li><a href="#"><asp:Image ID="Image6" runat="server" ImageUrl="~/Img/IMG_9491.JPG"/></a></li>
<li><a href="#"><asp:Image ID="Image8" runat="server" ImageUrl="~/Img/IMG_9542.JPG"/></a></li>
<li><a href="#"><asp:Image ID="Image7" runat="server" ImageUrl="~/Img/IMG_9494.JPG"/></a></li>
<li><a href="#"><asp:Image ID="Image9" runat="server" ImageUrl="~/Img/IMG_9498.JPG"/></a></li>
<li><a href="#"><asp:Image ID="Image10" runat="server" ImageUrl="~/Img/IMG_9499.JPG"/></a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="zoomer.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul.thumb li').Zoomer({speedView:200,speedRemove:400,altAnim:true,speedTitle:400,debug:false});
});
</script>
</body>
</html>
ul.thumb li {margin: 0; padding: 5px;float: left;position: relative;width: 110px;height: 77px;}
ul.thumb li img {width: 100px; height: 67px;border: 1px solid #ddd;padding: 5px;background: #f0f0f0;position: absolute;left: 0; top: 0;-ms-interpolation-mode: bicubic; }
ul.thumb li img.hover {margin-top:15px;background:url(thumb_bg.png) no-repeat center center;border: none;}
.title{position:absolute;width:185px;height:35px;margin:0;font-weight:900;background:url(blue.png) no-repeat center center;padding:17px 0 0 0;text-align:center; color: #fff; }
{$.fn.Zoomer=function(b)
{var c=$.extend({speedView:200,speedRemove:400,altAnim:false,speedTitle:400,debug:false},b);
var d=$.extend(c,b);
function e(s)
{if(typeof console!="undefined"&&typeof console.debug!="undefined")
{console.log(s)}
else{alert(s)}}
if(d.speedView==undefined||d.speedRemove==undefined||d.altAnim==undefined||d.speedTitle==undefined){e('speedView: '+d.speedView);e('speedRemove: '+d.speedRemove);e('altAnim: '+d.altAnim);e('speedTitle: '+d.speedTitle);return false}
if(d.debug==undefined){e('speedView: '+d.speedView);e('speedRemove: '+d.speedRemove);e('altAnim: '+d.altAnim);e('speedTitle: '+d.speedTitle);return false}if(typeof d.speedView!="undefined"||typeof d.speedRemove!="undefined"||typeof d.altAnim!="undefined"||typeof d.speedTitle!="undefined")
{if(d.debug==true){e('speedView: '+d.speedView);e('speedRemove: '+d.speedRemove);e('altAnim: '+d.altAnim);e('speedTitle: '+d.speedTitle)}
$(this).hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-110px',marginLeft:'-77px',top:'50%',left:'50%',width:'500px',height:'335px',padding:'20px'},d.speedView);
// if(d.altAnim==true)
// {var a=$(this).find("img").attr("alt");
// if(a.length!=0)
// {$(this).prepend('<span class="title">'+a+'</span>');
// $('.title').animate({marginLeft:'-42px',marginTop:'90px'}
// ,d.speedTitle).css({'z-index':'10','position':'absolute','float':'left'}
// )}}
},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'100px',height:'67px',padding:'5px'},d.speedRemove);$(this).find('.title').remove()})}}})(jQuery);