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这个函数,并且我要是都下载插件那不用写还好一些
接近 2 年之前 回复
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
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
JS(jquery)实现图片放大镜效果
本例中主要用到了jquery.js,jquery.jqzoom.js以及样式jqzoom.css, 为了演示方便,这里引用了一个购物网站的绝对路径,大家可以把jquery代码下过来自己用 .应用参考:http://www.vancl.com/ProductInfo/1120222.htmlimg标签中的 alt是大图片的路径, src是小图片的路径, class=jqzoom,设置样式,
jQuery实现网页放大镜功能
京东等电商网站中可以对商品进行放大观察,本文要实现的就是模仿这个放大镜功能,大致效果如下图所示:简要说明实现思路:1.原图窗口与放大窗口插入的是同一个图片,不过原图窗口的图片要适当缩小,放大窗口图片保持原大小,超出部分设置隐藏2.先定下放大比例,例如本文原图大小为1000*1000,可以把原图窗口的图片设为400*400,这样放大窗口就能实现2.5倍的放大效果了(两个窗口的大小是一样的!!都是400
jquery实现放大镜功能
放大镜效果,被广泛的应用于商城的商品展示,其效果相比大家都不陌生。其原理也不是很难,那么今天就实现下放大镜效果!        主要的CSS样式:溢出隐藏overflow:hidden,隐藏图层display:none,边距margin-left,margin-right        用的主要事件:鼠标移动事件mousemove()和鼠标移出事件mouseout();        原
input 点击放大镜背景搜索、jQuery实现简单前端搜索功能
转自:http://blog.csdn.net/doguanghan/article/details/69628017?utm_source=itdadao&amp;amp;utm_medium=referral&amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD...
Jquery插件开发之图片放大镜效果(仿淘宝)
Jquery插件开发之图片放大镜效果(仿淘宝)  需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大!  思索:为了考虑开发速度,最先考虑的是想使用网络上的现成代码!但是大致搜索了一下,网上可用的代码并不多,而且部分效果并不理想!而且有些代码,估计阅读下来比自己写一个成本还要高,于是产生了自己写一个jquery的插件的想法!  原理:最起考虑的原理是,两张图片,一张小图,一张大图
jquery写的两种放大镜小案例
很多同学在学习之初,都会用到放大镜的效果,这里用jquery写了两种放大镜效果,希望对学习的同学有所帮助。
js图片局部放大镜效果
在购物网站的展示页面中常常能看到跟随鼠标移动而移动焦点的放大镜效果,实现这种效果的方法很多,这里给出一种。 你需要一张大图和一张缩小尺寸的小图,小图在界面中显示,大图用来构造放大效果。<div id="mirror"></div> <div id="pic"> <img src="E:/com/front_end/source/middle_About.jpg">
jquery制作鼠标悬停图片放大镜特效(仿淘宝图片展示)
jquery制作鼠标悬停图片放大镜特效(仿淘宝图片展示) 里面有两个例子,个人感觉第二个可能用起来方便点
javascript淘宝主图放大镜功能
工欲善其事,必先利其器。要想实现某一个模块的功能,我们必须要知道他的原理。 放大镜的功能就是通过获取鼠标在小图中的位置,然后根据大小图的尺寸比例换算出大图需要显示的部分,然后使用定位让大图要显示的部分出现在右边的边框内。
jq仿京东商品详细页图片放大镜
jq仿京东商品详细页图片放大镜