之前做了一个滑动展示大图片的demo，之后在大神博客发现大神也做过一个类似的插件。
于是把插件摘了下来研究了一下。
改动了插件显示文本的部分并增加了一点注释。效果比我的好用。
点击看效果demo
插件源码如下：
(function($){
$.fn.preview = function(){
var xOffset = 10; //横向偏移量
var yOffset = 20; //纵向偏移量
var w = $(window).width(); //页面宽度
$(this).each(function(){
$(this).hover(function(e){
//检测图片和文字来生成不同的容器
if(/.png$|.gif$|.jpg$|.bmp$/.test($(this).attr("href"))){
$("body").append("<div id='preview'><div><img src='"+$(this).attr('href')+"' /><p>"+$(this).attr('title')+"</p></div></div>");
}else{
$("body").append("<div id='preview'><div><p>"+$(this).text()+"</p></div></div>");
}
$("#preview").css({
position:"absolute",
padding:"4px",
border:"1px solid #f3f3f3",
backgroundColor:"#eeeeee",
top:(e.pageY - yOffset) + "px", //鼠标位置减去纵向偏移量来定位到鼠标偏上的位置
zIndex:1000
});
$("#preview > div").css({
padding:"5px",
backgroundColor:"white",
border:"1px solid #cccccc"
});
$("#preview > div > p").css({
textAlign:"center",
fontSize:"12px",
padding:"8px 0 3px",
margin:"0"
});
if(e.pageX < w/2){
//鼠标在页面左侧则靠左展示淡入
$("#preview").css({
left: e.pageX + xOffset + "px",
right: "auto"
}).fadeIn("fast");
}else{
//鼠标在右边则靠左展示淡入
$("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left", "auto").fadeIn("fast");
}
},function(){
//鼠标移出则删除
$("#preview").remove();
}).mousemove(function(e){
//在a元素上移动时进行位置改变
$("#preview").css("top",(e.pageY - xOffset) + "px")
if(e.pageX < w/2){
$("#preview").css("left",(e.pageX + yOffset) + "px").css("right","auto");
}else{
$("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left","auto");
}
});
});
};
})(jQuery);
demo源码如下
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片放大显示的jQuery插件演示页面</title>
<link rel="stylesheet" href="../css/common.css" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="../js/jquery.imagePreview.1.0.js"></script>
<script type="text/javascript">
$(function(){
$("a.preview").preview();
});
</script>
<style type="text/css">
html{overflow-y:scroll;}
a.preview,a.preview:hover{text-decoration:none;}
a.preview img{margin:20px 10px;}
.img-list{
padding:1em;
font-size:1.1em;
border-bottom:1px dashed #cccccc;
line-height:1.4;
overflow:hidden;
zoom:1;
}
</style>
</head>
<body>
<div class="demo-container">
<h3 class="method-title">图片放大显示的jQuery插件演示页面</h3>
<div class="img-list">
<a class="preview" href="../../images/imgbig1.jpg">
<img src="../../images/imgcommon1.jpg" />
</a>
<a class="preview" href="../../images/imgbig2.jpg">
<img src="../../images/imgcommon2.jpg" />
</a>
<a class="preview" href="../../images/imgbig3.jpg">
<img src="../../images/imgcommon3.jpg" />
</a>
<a class="preview" href="../../images/imgbig4.jpg">
<img src="../../images/imgcommon4.jpg" />
</a>
<a class="preview" href="../../images/imgbig5.jpg">
<img src="../../images/imgcommon5.jpg" />
</a>
<p>
<a class="preview" href="http://www.zhangxinxu.com">请勿点击</a>
</p>
</div>
</div>
</body>
</html>
效果图如下
