JavaScript实现京东放大镜效果实现京东放大镜效果
本文实例为大家分享了JavaScript实现京东放大镜展示的具体代码，供大家参考，具体内容如下
实现效果：实现效果：
1.鼠标放到图片上显示放大镜和详细图，鼠标离开时什么都不显示（效果消失）
2.鼠标一直在放大镜的中间，且放大镜随鼠标移动
3.放大镜不能出缩列图的盒子
4.鼠标放在详细图上详细图消失
实现细节：实现细节：
1.大盒子虽然比详细图的盒子宽度小，但是在逻辑上详细图的盒子属于大盒子
2.详细图不能使用浮动，因为盒子下面一般会有文字内容
3.以父盒子来定位详细图的盒子
4.放大镜鼠标选中为十字形
5.对图片进行定位才能使图片移动
6.使用var evt = event || window.event; //兼容性写法
7.用放大镜顶点在盒子中的位置根据比例找到图片的位置，来显示图片
8.图片在详细图中的定位为负值
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东放大镜</title>
<style>
.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;
评论0