原生js-放大镜

原生js实现放大镜

效果 :

1. 鼠标放上去会有半透明遮罩, 右边会有大图局部图

2. 鼠标移动时右边的大图片也会局部移动

关键原理 :

鼠标在小图上移动时, 通过捕捉鼠标在小图片上的位置, 定位大图片的相应位置;

放大镜的移动方向和大图片的移动方向 : 横向和纵向都是相反的, 才可以保证同步;

涉及到的技术点 :

(1). 鼠标事件 : onmouseover(进入) onmouseout(移除) onmousemove(移动)

(2). offsetLeft offsetTop oddsetWidth offsetHeight event.clientX event.clientY

• offsetLeft 相当于父元素的左位移

• offsetHeight oddsetWidth 元素的宽高, 里面的宽高是不包括滚动条的

• event.clientX event.clientY 鼠标的X和Y轴, 相当于整个页面的坐标, 而不是子元素

offsetLeft 和 style.left 对比 :

(1). style.left 返回的是字符串 (2). style.left 是可以读写的, offsetLeft 只可以读, 所以要改变div的位置只能修改 style.left

(3). style.left 的值需要事先定义, 否则取到的值为空. style.left只针对在HTML中写的值有效, 样式表中无法定义 style.left

* { margin: 0; padding: 0 } #demo { display: block; width: 323px; height: 430px; margin: 5px; position: relative; border: 1px solid #ccc; } #small-box { position: relative; z-index: 1; } #float-box { display: none; width: 160px; height: 120px; position: absolute; background: #ffffcc; border: 1px solid #ccc; filter: alpha(opacity=50); opacity: 0.5; } #big-box { display: none; position: absolute; top: 0; left: 330px; width: 323px; height: 430px; overflow: hidden; border: 1px solid #ccc; z-index: 10; } #big-box img { position: absolute; z-index: 5 }