jQuery当鼠标悬停时放大图片的效果实例_jquery
时间：2021-07-01 10:21:17
帮助过：6人阅读
这个效果最初源于小敏同志的一个想法，刚开始做的时候只能实现弹出的图片是固定的，不能随鼠标移动，最后加以改善，终于实现了比较理想的效果。今天就把制作该效果的经验与大家一同分享。先看看最终效果演示：
HTML结构部分：
先编写一个无序列表的结构，a标签中的img标签用来存放小图片，a标签添加一个rel属性，用来存放大图片的路径。
代码如下:
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事件，也就是当鼠标移动的时候，大图片就会跟着鼠标移动了。看以下的代码：
代码如下:
