这种效果最初源于肖敏同志的一个思想。刚开始只有弹出的图片是固定的，不能用鼠标移动。最后进行了改进，最终达到了理想的效果。今天就和大家分享一下我制作这种效果的经验。先看最后的演示：。

HTML结构：首先，编写一个无序列表结构。A标签中的img标签用于存储小图片，A标签添加了rel属性来存储大图片的路径。复制代码如下： ul id=gallery siz cache=' 6 ' siz set=' 7 ' lissiz cache=' 6 ' siz set=' 7 ' A class=' small image ' href='//www . JB 51 . net ' rel=images/001 _ big . jpgimg alt=' src=' http 3360 images/001 _ small . jpg '/A LI siz cache=' 6 ' siz set=' 8 ' A class=' small image ' href='//将其样式设置为绝对定位，并首先将其隐藏。给A标签添加黑色背景是为了给图片的变暗效果铺路。这样就完成了一个简单的相册效果。复制的代码如下： ul # gallery { list-style : none；宽度width:660pxmargin:0 auto 10px左填充left:20pxborder:1px固体# d3d3d3背景# fff飞越：隐藏；} ul # gallery li { width:200px高度：200 px；float:left余量：20 px 20 px 20 px 0；} ul # gallery Li a . small image { background : # 333；/*添加黑色背景，为图片变暗铺平道路*/display : block；宽度width:200px高度：200 px；} # big image { position : absolute；display:none/*大图的父标签相对定位，显示样式设置为隐藏*/} # big image img { width :400 px；高度：400 px；padding:5px背景# fffborder:1px实心# e3e3e3}jQuery代码部分：首先声明两个变量x和y来存储大图和鼠标的距离。在正文中添加一个id为bigimage的p标签来存储大图，大图的路径包含在a标签的rel属性中。当鼠标悬停在小图片上时，将获得的鼠标在浏览器中的坐标赋给大图片的绝对定位坐标，并以淡入效果显示。然后，将一个mousemove事件绑定到小图片，即当鼠标移动时，大图片将跟随鼠标。看下面的代码：复制的代码如下： script src=' http :3358 Ajax . googleapis.com/Ajax/libs/jquery/1 . 4 . 2/jquery . min . js ' type=' text/JavaScript '/script type=' text/JavaScript '/！[CData[$(function(){ var x=22；var y=20$ ('a.smallimage ')。hover(function(e){//绑定鼠标悬停事件//创建一个新的p标记来存储大图片，this.rel是获取标记a的大图片的路径，然后将其追加到body $ ('body ')中。追加(' p id=' bigimage' img src=')。//将小图片的透明度更改为0.5。结合上面的CSS，看起来画面变暗了$(这个)。查找(' img ')。停止()。fadeto('慢'，0.5)；//计算鼠标和声明的x、y坐标，赋给大图绝对定位的坐标，然后显示$ ('# bigimage ')。css ({top: (e. pagey-y)' px '，left :(e . pagex)' px ' })FADEin }，function(){ //鼠标离开后，//将变暗的图片恢复为$ (this)。查找(' img ')。停止()。fadeto ('slow '，1)；//删除新添加的p标记$('#bigimage ')。移除()；});$ ('a.smallimage ')。mousemove(函数(e){//绑定一个鼠标移动的事件//计算鼠标和声明的x、y的坐标，赋给大图绝对定位的坐标，这样大图就可以移动$ ('# bigimage ')。CSS ({top: (e.pagey)。});});//]]/剧本到了这一步，效果差不多，但正如兰秋峰同志所说，效果并不完美。如果弹出的大图超过了浏览器的宽度，就会出现滚动条，对用户体验确实不好。周末有时间的时候，在原来的基础上修改了一下。

默认情况下，弹出的大图始终位于当前鼠标指针的右侧。如果当前鼠标指针与浏览器右边界的宽度小于弹出的大图片宽度，图片会溢出浏览器。然后只需写一条语句，判断当前鼠标指针与浏览器右侧边界的宽度是否小于大图的宽度，然后根据这个判断进行显示。有了以上想法，就好办了。为了让代码更简洁，提高可重用性，我增加了一个widthJudge函数来判断宽度：复制的代码如下：function widthJudge(e){ //从鼠标当前X坐标中减去页面的总宽度，得到右边界var margin right=document . document element . client width-e . pagex的宽度；//获取弹出大图片的宽度var image width=$ ('# bigimage ')。宽度()；//如果右边界宽度小于弹出的大图宽度，如果(marginRight imageWidth) {//重新计算变量x=imageWidth 22的值；//此时，大图的位置应该是当前鼠标指针的宽度减去新x $ ('# bigimage ')的值。CSS ({top: (e. pagey-y)' px '，left :(e . pagex-x)' px ' })；}else{ //否则//仍然将x定义为22，这个步骤一定不能省略，因为x的值之前已经改变了x=22//如果右侧的宽度值足以显示大图片，$ ('# bigimage ')。CSS ({top: (e. pagey-y)' px '，left: (e. pagex)' px'})仍会按照原来的位置显示；};}最后结合上面的代码，完整的jQuery代码如下：复制的代码如下： script type=' text/JavaScript '//！[CData[$(function(){ var x=22；var y=20$('a.smallimage ')。悬停(函数(e){ $('body '))。追加(' p id=' big image ' img src=' http : ' this . rel ' ' alt=' '//p ')；$(这个)。查找(' img ')。停止()。fadeTo('慢'，0.5)；宽度判断(e)；//调用宽度判断函数$('#bigimage ')。fadeIn(' fast ')；}，function(){ $(this)。查找(' img ')。停止()。fadeTo('慢'，1)；$('#bigimage ')。移除()；});$('a.smallimage ')。mousemove(函数(e){ width judge(e))；//调用宽度判断函数})；函数width judge(e){ var margin right=document . document element . client width-e . page x；var imageWidth=$('#bigimage ')。宽度()；if(margin right imageWidth){ x=imageWidth 22；$('#bigimage ')。css({top:(e.pageY - y ) 'px '，left :(e . Pagex-x)' px ' })；} else { x=22$('#bigimage ')。css({top:(e.pageY - y ) 'px '，left :(e . Pagex x)' px ' })；};} });//]]/脚本解决了图片溢出浏览器的问题，效果还不错。如果喜欢这个效果，可以下载源文件。