<!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>
<title> new document </title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="imgpreview.0.22.js" type="text/javascript"></script>
<style>
#imgPreviewWithStyles,
#imgPreviewWithStyles2,
#imgPreviewWithStyles3 {
background: #222;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 15px;
z-index: 999;
border: none;
}
/* Text below image */
#imgPreviewWithStyles span,
#imgPreviewWithStyles2 span,
#imgPreviewWithStyles3 span {
color: white;
text-align: center;
display: block;
padding: 10px 0 3px 0;
}
.loading { height: 32px;width: 32px;}
</style>
</head>
<body>
<ul id="first">
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/1.jpg">美丽的夕阳</a></li>
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/2.jpg">纽约国际大都市</a></li>
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/3.jpg">办公室会议</a></li>
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/4.jpg">余晖下的沙滩</a></li>
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/5.jpg">全球通信</a></li>
</ul>
<ul id="second">
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/1.jpg">美丽的夕阳</a></li>
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/2.jpg">纽约国际大都市</a></li>
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/3.jpg">办公室会议</a></li>
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/4.jpg">余晖下的沙滩</a></li>
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/5.jpg">全球通信</a></li>
</ul>
<ul id="third">
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/1.jpg">美丽的夕阳</a></li>
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/2.jpg">纽约国际大都市</a></li>
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/3.jpg">办公室会议</a></li>
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/4.jpg">余晖下的沙滩</a></li>
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/5.jpg">全球通信</a></li>
</ul>
<ul id="fourth">
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/1.jpg">美丽的夕阳</a></li>
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/2.jpg">纽约国际大都市</a></li>
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/3.jpg">办公室会议</a></li>
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/4.jpg">余晖下的沙滩</a></li>
<li><a href="http://james.padolsey.com/demos/imgPreview/full/img/5.jpg">全球通信</a></li>
</ul>
<ul id="fifth">
<li><a href="http://google.com" rel="http://www.google.cn/intl/zh-CN/images/logo_cn.gif">Google</a></li>
<li><a href="http://yahoo.com" rel="http://cn.yimg.com/i/onesearch/1210/oms_001.gif">Yahoo</a></li>
</ul>
本测试页面由 <a href="http://blog.csdn.net/xxd851116">笑的自然</a> 最后编辑 <a href="http://blog.csdn.net/xxd851116">http://blog.csdn.net/xxd851116</a>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('ul#first a').imgPreview();
$('ul#second a').imgPreview({
imgCSS: { width: 200 }
});
$('ul#third a').imgPreview({
containerID: 'imgPreviewWithStyles',
imgCSS: {
// Limit preview size:
height: 200
},
// When container is shown:
onShow: function(link){
// Animate link:
$(link).stop().animate({opacity:0.4});
// Reset image:
$('img', this).css({opacity:0});
},
// When image has loaded:
onLoad: function(){
// Animate image
$(this).animate({opacity:1}, 300);
},
// When container hides:
onHide: function(link){
// Animate link:
$(link).stop().animate({opacity:1});
}
});
$('ul#fourth a').imgPreview({
containerID: 'imgPreviewWithStyles2',
imgCSS: {
// Limit preview size:
height: 200
},
// When container is shown:
onShow: function(link){
$('<span>' + $(link).text() + '</span>').appendTo(this);
},
// When container hides:
onHide: function(link){
$('span', this).remove();
}
});
$('ul#fifth a').imgPreview({
containerID: 'imgPreviewWithStyles3',
srcAttr: 'rel',
imgCSS: {
// Limit preview size:
//height: 200,
width: 300
},
// When container is shown:
onShow: function(link){
$('<span>' + link.href + '</span>').appendTo(this);
},
// When container hides:
onHide: function(link){
$('span', this).remove();
}
});
});
//]]>
</script>
</body>
</html>
imgPreview.rar （4个子文件） 
imgPreview 
jquery-1.3.2.js 56KB imgpreview.full.0.22.jquery.js 4KB imgpreview.0.22.js 1KB
index.html 5KB资源评论
zym8209102012-05-15网上一大堆这样的代码，而且你的文档连说明都没，非常不值得推荐！
pandayf2013-01-09只能本地预览，远程不行
dazuiqiang642014-03-23代码写得太乱了，基本看不懂，没用- cnheng_12013-12-30网上一大堆这样的代码，而且你的文档连说明都没，非常不值得推荐
a_ding2012-12-08不兼容所有浏览器的，不好用
