2 zengyunhua1992 zengyunhua1992 于 2016.09.14 17:00 提问

jquery实现一个图片放大镜功能 ,提示使用offset()

当鼠标放置在对应缩略图上时,图片下方出现对应大图。提示使用offset()
图片说明

2个回答

qq_32317661
qq_32317661   2016.09.14 17:14
已采纳

可以使用fancyBox,效果做出来是一样的:
特点

1、允许我们用鼠标和键盘上的四个方向键切换图片
2、可以根据当前窗口大小自动调整弹出框的大小,当我们改变浏览器窗口大小时,将会看到弹出框自动缩放了
3、支持缩略图和按钮帮助导航
4、弹出框支持显示多种类型的内容(图片,html,视频……)
请下载demo中的文件(建议下载网盘中的,已经经过整理),查看index.html中的源代码,提取你想要的效果的js和html代码。

还可以参加参数列表进行自定义设置。

使用步骤

1、下载插件并解压,复制文件并在你的页面中包含相关的脚本和样式文件,注意js和css文件的路径,(其实有些文件是可选的)


2、创建包含有将要在fancyBox中打开的元素的路径的a标签,大家可以注意到,这里面包含了两张图片,一张小图和一张大图,如果嫌麻烦的话,完全可以设置成一张图片,只需要控制各自的大小即可。只不过这样会在一定程度上加大页面的负担。

<;/a>

3、当页面文档被加载完毕后执行fancyBox函数

$(document).ready(function () { $( ".fancybox").fancybox(); });
zengyunhua1992
zengyunhua1992 我都还没有学到fancybox这个函数,并且我要是都下载插件那不用写还好一些
大约一年之前 回复
Lunar_star
Lunar_star   2016.09.15 09:18

就是根据你当前鼠标指针的位置,得到X和 Y的位置
然后你根据X,Y的位置进行判断,判断你指的是哪一张图片
比如第一张图左上角的点坐标是 (50 50),右下角的坐标是(100,100);
你只需要判断

 if(50<x&&x<100&&50<y&&y<100){
        相关代码
 }else if(第二个图的坐标){
        相关代码
 }else if(第三个图的坐标){
     相关代码
 }

相应的代码就是 下面那个方法图片,是哪张图, 用JS设置一下对应图片就可以了

Csdn user default icon
上传中...
上传图片
插入图片