JavaScript实现京东放大镜效果

本文实例为大家分享了Javascript实现京东放大镜展示的具体代码，供大家参考，具体内容如下

实现效果：

1.鼠标放到图片上显示放大镜和详细图，鼠标离开时什么都不显示（效果消失）
2.鼠标一直在放大镜的中间，且放大镜随鼠标移动
3.放大镜不能出缩列图的盒子
4.鼠标放在详细图上详细图消失

实现细节：

 1.大盒子虽然比详细图的盒子宽度小，但是在逻辑上详细图的盒子属于大盒子
 2.详细图不能使用浮动，因为盒子下面一般会有文字内容
 3.以父盒子来定位详细图的盒子
 4.放大镜鼠标选中为十字形
 5.对图片进行定位才能使图片移动
 6.使用var evt = event || window.event; //兼容性写法
 7.用放大镜顶点在盒子中的位置根据比例找到图片的位置，来显示图片
 8.图片在详细图中的定位为负值

代码：

 
 
 
 .box{ 
 width: 350px;
 height: 350px;
 position: relative;
 margin: 100px;
 border: 1px solid #aaa;
 }
 .box .detailed{ 
 width: 450px;
 height: 450px;
 border: 1px solid #aaa;
 position: absolute;
 overflow: hidden;
 left: 365px;  
 top: 0;
 
 display: none;
 }
 .box .normal .magnfier{
 width: 150px;
 height: 150px;
 top: 0;
 left: 0;
 position: absolute;
 background-color: rgba(0, 0, 255, 0.2);
 cursor: move; 
 display: none; 
 }
 .detailed img{ 
 position: absolute;
 top: 0;
 left: 0;
 }
 
 


  
 
 
 
 
 
 
 
 

更多关于放大镜的效果，请查看专题：《放大镜特效》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。