jQuery当鼠标悬停时放大图片的效果实例_jquery

这个效果最初源于小敏同志的一个想法，刚开始做的时候只能实现弹出的图片是固定的，不能随鼠标移动，最后加以改善，终于实现了比较理想的效果。今天就把制作该效果的经验与大家一同分享。先看看最终效果演示：

HTML结构部分：
先编写一个无序列表的结构，a标签中的img标签用来存放小图片，a标签添加一个rel属性，用来存放大图片的路径。

CSS样式表部分：
bigimage是用jQuery创建的一个p标签的id，用来存放大图片，设置其样式为绝对定位，并先隐藏。给a标签添加一个黑色的背景，是为了给图片变暗的效果做铺垫。就这样，一个简单的相册效果就做好了。

jQuery代码部分：
先声明2个变量x，y用来存放大图片离鼠标的距离。在body中追加一个id为bigimage的p标签，用来存放大图片，大图片的路径就包含在了a标签的rel属性中。当鼠标在小图片悬停的时候，将获取到的鼠标在浏览器中的坐标赋值给大图片绝对定位的坐标，并以淡入的效果显示。之后，再给小图片绑定一个mousemove事件，也就是当鼠标移动的时候，大图片就会跟着鼠标移动了。看以下的代码：

到这一步，效果已经差不多了，但是正如蓝秋枫同志提到的，效果还并不完美。如果弹出的大图片超过了浏览器的宽度就会出现滚动条，这对于用户体验来说的确很不好。趁周末有时间我又在原来的基础上进行了修改。
先分析下思路，默认情况下，弹出的大图片的位置始终是在当前鼠标指针的右侧，如果当前鼠标指针离浏览器右侧边界的宽度小于弹出的大图片的宽度时，就会出现图片溢出浏览器的现象。那么只要写一个语句判断当前鼠标指针离浏览器右侧的边界的宽度是否小于大图片的宽度，然后再根据这个判断来显示。
有了上面的思路就好办了，为了使代码更简洁，提高复用性，我新增了一个widthJudge函数用于判断宽度：

最后再结合上面的代码，完整的jQuery代码部分如下：

解决了图片溢出浏览器的问题，这个效果还算不错了。如果你喜欢这个效果，你可以下载源文件。