这个效果最初源于小敏同志的一个想法，刚开始做的时候只能实现弹出的图片是固定的，不能随鼠标移动，最后加以改善，终于实现了比较理想的效果。今天就把制作该效果的经验与大家一同分享。先看看最终效果演示：
[img]http://files.jb51.net/file_images/article/201307/201373145534617.jpg[/img]
HTML结构部分：
先编写一个无序列表的结构，a标签中的img标签用来存放小图片，a标签添加一个rel属性，用来存放大图片的路径。
[url=http://www.1sucai.cn] <LI sizcache="6" sizset="8"><A class="smallimage" href="http://www.1sucai.cn" rel=images/002_big.jpg><IMG alt="" src="images/002_small.jpg"></A>
<LI sizcache="6" sizset="9"><A class="smallimage" href="http://www.1sucai.cn" rel=images/003_big.jpg><IMG alt="" src="images/003_small.jpg"></A>
</LI></UL>
CSS样式表部分：
bigimage是用jQuery创建的一个p标签的id，用来存放大图片，设置其样式为绝对定位，并先隐藏。给a标签添加一个黑色的背景，是为了给图片变暗的效果做铺垫。就这样，一个简单的相册效果就做好了。
ul#gallery { list-style:none; width:660px; margin:0 auto 10px; padding-left:20px; border:1px solid #d3d3d3; background:#fff; overflow:hidden; }
ul#gallery li { width:200px; height:200px; float:left; margin:20px 20px 20px 0; }
ul#gallery li a.smallimage { background:#333; /*添加一个黑色的背景为图片变暗的效果做铺垫*/ display:block; width:200px; height:200px; }
#bigimage { position:absolute; display:none; /*大图片的父标签设置相对定位并将显示样式设置为隐藏*/ }
#bigimage img { width:400px; height:400px; padding:5px; background:#fff; border:1px solid #e3e3e3; }
jQuery代码部分：
先声明2个变量x，y用来存放大图片离鼠标的距离。在body中追加一个id为bigimage的p标签，用来存放大图片，大图片的路径就包含在了a标签的rel属性中。当鼠标在小图片悬停的时候，将获取到的鼠标在浏览器中的坐标赋值给大图片绝对定位的坐标，并以淡入的效果显示。之后，再给小图片绑定一个mousemove事件，也就是当鼠标移动的时候，大图片就会跟着鼠标移动了。看以下的代码：
[url=http://xiazai.jb51.net//201307/yuanma/jquery-image-hover-zoom.zip]下载源文件[/url]。
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
