JQuery放大镜效果实现实例

实现效果演示：

鼠标移入左侧缩略图时，小盒子和右边大图显示，并且小盒子跟随鼠标移动，右侧大图出现放大效果。

实现步骤：

HTML部分：
要实现放大镜效果，只需要一个简单的布局，左右各一个盒子，左侧放缩略图，里面包着小盒子（放大镜），右侧放大图，用于制造放大效果。

<body><div id="box"><div id="lbox"><img src="data:images/1.jpg" alt="" id="tp1"><div id="xbox"></div></div><div id="rbox"><img src="data:images/2.jpg" alt="" id="tp2"></div></div>
</body>

CSS部分：
放大镜效果样式重点：左侧小盒子和右侧大盒子要默认隐藏，并且都要加上position属性，方便之后做移动效果。

*{margin:0;padding: 0;
}#lbox{float: left;width:400px;height:400px;border:1px solid;}#tp1{position:absolute;top:20;left: 0;width:400px;height:400px;}#xbox{background:#fff;width:200px;height: 200px;position:absolute;opacity:0.3;display: none;}#rbox{width: 500px;height: 500px;border:1px solid;overflow:hidden;float: left;display: none;position:relative;}#tp2{width: 900px;height: 900px;position:absolute;}

JQ部分：
首先通过hover实现第一个效果：让小盒子和外面的大盒子显示/隐藏

 $(lbox).hover(function() {                         //给左边大盒子加hover$(xbox).show()                          //这里是移入事件，控制两个盒子显示$(rbox).show()}, function() {$(xbox).hide()                          //这里是移出事件，控制两个盒子隐藏$(rbox).hide()});

之后开始写主要功能：小盒子跟随鼠标移动，并且鼠标位置固定在中间，右边大图出现放大效果

 $(lbox).mousemove(function(e){            //首先要给左边大盒子加鼠标移动事件，这样才能一直触发事件，更新盒子位置var e=e||event;                    //声明event，用于获取鼠标位置var x=e.clientX-$(lbox).offset().left-$(xbox).width()/2;    //这里x=鼠标位置减去左边大盒子距离网页边框的距离，这一步获得了鼠标相对于盒子内部的位置，之后再减去小盒子的宽/2，就获得了盒子正中间的位置。之后把这个值赋给xvar y=e.clientY-$(lbox).offset().top-$(xbox).height()/2;    //这个是鼠标的纵轴，原理同上var maxx=$(lbox).width()-$(xbox).width();       //这里声明了一个最大宽度，用于限制小盒子的右边移动范围，利用大盒子的总宽度减去小盒子的总宽度，剩下的就是小盒子的移动范围，这个好理解。var maxy=$(lbox).height()-$(xbox).height(); //小盒子纵轴移动范围 原理同上//这里开始四个if分别用来限制盒子的左上下右的最大移动范围，不能让小盒子超出大盒子if(x<0){x=0}if(y<0){y=0}if(x>maxx){x=maxx;}if(y>maxy){y=maxy}//最后将值通过css方法写入进去//这里要注意，不能用attr({top:y,left:x}),因为attr写入的属性是写到元素行内的，尽管css里提前写好了position样式，但行内的top和left还是无法和css里的定位属性进行关联。$(xbox).css({top:y,left:x})$(tp2).css({top:-y*2,left:-x*2})    //这里是右边图片的移动属性，xy轴分别向反方向移动，做出跟随镜头的效果，乘二是因为右边大图比左边小图大一倍。});

注意：最后添加样式时，不能用attr({top:y,left:x}) ，原因请看注释。

到这里，一个放大镜功能就实现了，欢迎大家指出错误，笔芯。

JQuery放大镜效果实现实例相关推荐

JQuery放大镜效果
在网上找了些实现放大镜效果的方法,感觉这个方法符合我的要求就摘过来了,非原创在一些电子商务或商品展示网上,为了更好的显示商品,一般都会添加放大镜的效果. 如图:(当把鼠标放到小图片上,右边会自动的出 ...
Html之实例练习（轮播图片、放大镜效果、面板拖动）
文章目录一.轮播图片二.放大镜效果三.面板拖动本篇将简单演示一下HTML里的轮播图片.放大镜效果和面板拖动的实例,代码已经打包在文章开头,需要参考的请自行下载一.轮播图片 1.效果图 2.J ...
13款jQuery图片放大镜效果代码
jQuery商城网站商品放大镜查看效果代码 jquery图片放大镜效果制作变焦镜头图片放大查看代码 jQuery鼠标滑过图片放大镜效果_淘宝图片放大镜代码 jquery jqzoom仿京东商城商品详细 ...
【jQuery】前端项目实践案例6——制作产品放大镜效果（仿京东淘宝图片效果）
使用jQuery制作产品放大镜效果实现效果: 使用jQuery制作产品放大镜效果实现原理: 通过设置图像的 CSS 属性( left 和 top ),来实现图像的移动. 使用jQuery制作产品放大镜 ...
jquery图片放大效果,鼠标经过图片时局部放大，类似京东图片放大镜效果
原文:jquery图片放大效果,鼠标经过图片时局部放大,类似京东图片放大镜效果源代码下载地址:http://www.zuidaima.com/share/1746784990055424.htm 1 ...
使用jQuery实现图片放大镜效果
使用jQuery实现图片放大镜效果在淘宝上购物时,经常可以看到图片放大镜效果,如下图所示: 下面给出上述效果的jQuery实现代码,一切尽在代码注释中: <!DOCTYPE html> ...
jQuery实现放大镜效果
放大镜效果想必大家并不陌生,在广泛的应用在各种线上商城的商品展示,那么今天为大家实现以下放大镜效果: CSS样式:overflow:hidden 溢出隐藏:margin-left,margin-rig ...
仿京东商城商品图片缩略图+放大镜效果
Jquery包文件及样式下载具体效果可参考京东商城商品图片展示第一步:需要导入Jquery包文件和样式文件(放在<head></head>中间): <script s ...
jquery zoom jquery放大镜特效
这是一款非常不错的给图片添加放大镜效果,可以应用在诸如zen cart,magento电子商场之类的开源项目上.如果想看它的效果,你可以直接访问: http://www.mind-projects.i ...

JQuery放大镜效果实现实例

JQuery放大镜效果实现实例相关推荐

最新文章

热门文章