在网上找到了一个不错的图片预览效果，代码写的比较冗余，请大家自己精简，优化；原理比较简单，一看就懂，我直接上代码了。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
<title>图片预览效果</title> 
<style type="text/css">
body{margin:0;padding:0;}
h3{
    margin-left:40px;
margin-top:50px;
font-size:14px;
}
ul{
margin-top:20px;
list-style:none;
}
ul li{
    float:left;
margin-right:20px;
border: 1px solid;
}
/* tooltip */
#bigger{
    position:absolute;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
debugger;
    var xPos = 10;
var yPos = 20;
    if(!document.getElementsByTagName){return false;}
var links=document.getElementsByTagName("a");
for(var i=0,len=links.length;i<len-4;i++){
links[i].οnmοuseοver=function(e){
    //获取大图的地址，将大图装入img元素
var imgUrl=this.getAttribute("href");
var bigger=document.createElement("img");
bigger.setAttribute("src",imgUrl);
//为大图设置id，为删除此元素做准备，将大图加到文档
bigger.setAttribute("id","bigger");
document.body.appendChild(bigger);
//兼容的获取鼠标位置，并复制给大图
var x = e.pageX || (e.clientX +
                (document.documentElement.scrollLeft
                || document.body.scrollLeft));
            var y= e.pageY || (e.clientY +
                (document.documentElement.scrollTop
                || document.body.scrollTop));
bigger.style.top=(y+yPos)+"px";
bigger.style.left=(x+xPos)+"px";
};
links[i].οnmοuseοut=function(e){
    //找到大图所在元素，从文档中删除元素节点
    var elem=document.getElementById("bigger");
document.body.removeChild(elem);
};
//通过设置mousemove使得大图随鼠标在元素上移动
links[i].οnmοusemοve=function(e){
    var elem=document.getElementById("bigger");
var x = e.pageX || (e.clientX +
                (document.documentElement.scrollLeft
                || document.body.scrollLeft));
            var y= e.pageY || (e.clientY +
                (document.documentElement.scrollTop
                || document.body.scrollTop));
elem.style.top=(y+yPos)+"px";
elem.style.left=(x+xPos)+"px";
};
}
}
</script>
</head>
<body>
<h3>有效果：</h3>
<ul>
<li><a href="http://f.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=c6929c60a964034f0bcdc2039ff8080c/faedab64034f78f07a5fc84e7b310a55b3191c32.jpg?referer=92598ea9ba99a90162226f065cd1&x=.jpg" class="tooltip" title="苹果 iPod"><img src="http://c.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=2c7960852a381f309a198dac993a3d35/060828381f30e9240acfce8c4e086e061d95f720.jpg?referer=c0586b7ed5ca7bcb246cf31f31fe&x=.jpg" alt="苹果 iPod" /></a></li>
<li><a href="http://g.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=27682d1df403738dda4a0c278320c16c/4b90f603738da977a77bd496b251f8198618e333.jpg?referer=fd4e055df503918f8ec609fa4dd1&x=.jpg" class="tooltip" title="苹果 iPod nano"><img src="http://c.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=181ea8711c178a82ca3c7fa5c63802b0/cefc1e178a82b901d0a8918e718da9773912ef02.jpg?referer=cd147652abec8a134d0d62d04900&x=.jpg" alt="苹果 iPod nano"/></a></li>
<li><a href="http://a.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=9e42bd3948ed2e73f8e98629b73ad0b6/dbb44aed2e738bd41b24e08ca38b87d6277ff902.jpg?referer=fdc3d57641166d22616020a44700&x=.jpg" class="tooltip" title="苹果 iPhone"><img src="http://d.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=9a2ad496b251f819f525034fea8f3bd0/b21bb051f81986189542bd3948ed2e738bd4e602.jpg?referer=abc236b0249759ee134755fb4200&x=.jpg" alt="苹果 iPhone"/></a></li>
<li><a href="http://c.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=14720ced0e33874498c52f796134a8c4/6a600c338744ebf8f81a3682dbf9d72a6059a720.jpg?referer=50e1b72f0ef431ade5c5770901fe&x=.jpg" class="tooltip" title="苹果 Mac"><img src="http://g.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=90756e7a92529822013339c6e7f10af6/08f790529822720edaa5b04779cb0a46f21fab20.jpg?referer=2da4d59c9113b07ee4aa643815fe&x=.jpg" alt="苹果 Mac"/></a></li>
</ul>
<br/><br/><br/><br/>
<br/><br/><br/><br/>
<h3>无效果：</h3>
<ul>
<li><a href="http://f.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=c6929c60a964034f0bcdc2039ff8080c/faedab64034f78f07a5fc84e7b310a55b3191c32.jpg?referer=92598ea9ba99a90162226f065cd1&x=.jpg" title="苹果 iPod"><img src="http://c.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=2c7960852a381f309a198dac993a3d35/060828381f30e9240acfce8c4e086e061d95f720.jpg?referer=c0586b7ed5ca7bcb246cf31f31fe&x=.jpg" alt="苹果 iPod" /></a></li>
<li><a href="http://g.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=27682d1df403738dda4a0c278320c16c/4b90f603738da977a77bd496b251f8198618e333.jpg?referer=fd4e055df503918f8ec609fa4dd1&x=.jpg" title="苹果 iPod nano"><img src="http://c.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=181ea8711c178a82ca3c7fa5c63802b0/cefc1e178a82b901d0a8918e718da9773912ef02.jpg?referer=cd147652abec8a134d0d62d04900&x=.jpg" alt="苹果 iPod nano"/></a></li>
<li><a href="http://a.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=9e42bd3948ed2e73f8e98629b73ad0b6/dbb44aed2e738bd41b24e08ca38b87d6277ff902.jpg?referer=fdc3d57641166d22616020a44700&x=.jpg" title="苹果 iPhone"><img src="http://d.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=9a2ad496b251f819f525034fea8f3bd0/b21bb051f81986189542bd3948ed2e738bd4e602.jpg?referer=abc236b0249759ee134755fb4200&x=.jpg" alt="苹果 iPhone"/></a></li>
<li><a href="http://c.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=14720ced0e33874498c52f796134a8c4/6a600c338744ebf8f81a3682dbf9d72a6059a720.jpg?referer=50e1b72f0ef431ade5c5770901fe&x=.jpg" title="苹果 Mac"><img src="http://g.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=90756e7a92529822013339c6e7f10af6/08f790529822720edaa5b04779cb0a46f21fab20.jpg?referer=2da4d59c9113b07ee4aa643815fe&x=.jpg" alt="苹果 Mac"/></a></li>
</ul>
</body>
</html>