用javascript实现放大镜效果

我们经常在一些详情页上可以见到放大镜效果，今天我们也来做一个放大镜样式。

先来看一下效果:

图中的图片选的不是很好,有些糊了,各位可以重新选择图片进行做放大镜案例

这个案例可以分为三个功能模块

1.鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能
2.黄色的遮挡层跟随鼠标功能。
3.移动黄色遮挡层，大图片跟随移动功能。 

这是我们的html主体部分:

<div class="product_intro clearfix">
?? ??? ??? ?<!-- 预览区域 -->
?? ??? ??? ?<div class="preview_wrap fl">
?? ??? ??? ??? ?<div class="preview_img">
?? ??? ??? ??? ??? ?<img src="img/big5.jpg" class="smallImg">
?? ??? ??? ??? ??? ?<div class="mask">
?
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?<div class="big">
?? ??? ??? ??? ??? ??? ?<img src="img/big5.jpg" class="bigImg">
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div>
? ? ?</div>
</div>

接下来是css样式部分，这里要注意放大镜部分大图和小图部分的隐藏雨显示以及定位问题

.preview_wrap {
? ? ? width: 400px;
? ? ? height: 590px;
?? ??? ??? ?}
?
.preview_img {
? ? ? position: relative;
? ? ? height: 398px;
? ? ? border: 1px solid #CCCCCC;
? ? ? background-color: pink;text-align: center;
?? ??? ??? ??? ?
?? ??? ??? ?}
?
.preview_img .smallImg {
? ? ? margin-top: 25%;
? ? ? width: 200px;
?? ??? ??? ?}
?
.mask {
? ? ? ? display: none;
? ? ? ? position: absolute;
? ? ? ? top: left: 0;
? ? ? ? width: 300px;
? ? ? ? height: 300px;
? ? ? ? background-color: yellow;
? ? ? ?opacity: .5;
? ? ? ?border: 1px solid #CCCCCC;
? ? ? ? cursor: move;
?}
?
.big {
? ? ? ?display: none;
? ? ? ?position: absolute;
? ? ? ?left: 410px;
? ? ? ?top: 0;
? ? ? ?width: 500px;
? ? ? ?height: 500px;
? ? ? ?z-index: 999;
? ? ? ?border: 1px solid #ccc;
? ? ? ?overflow: hidden;
}

.big img {
? ? ? ?position: absolute;
? ? ? ?top: 0;
? ? ? ?left: 0;
}

最后来看javascript部分:

如果重新连接一个javascript页面的话要记得写好<script src="" type="text/javascript" ></script>

并且要加上window.addEventListener('load', function() {},它的作用是当页面全部加载执行完毕后再执行js代码

接下来是代码步骤及思路,并且在js代码里也会标注好

1.鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能,就是显示与隐藏
2.鼠标移动的时候,让黄色的盒子跟着鼠标来走
3.把鼠标坐标给遮挡层不合适。因为遮当层坐标以父盒子为准。
4.首先是获得鼠标在盒子的坐标
5.之后把数值给遮挡层做为left和top值。盒子高度 300的一半 150
6.此时用到鼠标移动事件，但是还是在小图片盒子内移动。mask移动的距离
7.遮挡层不能超出小图片盒子范围
8.大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离

// 整个案例可以分为三个功能模块
// 鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能
// 黄色的遮挡层跟随鼠标功能。
// 移动黄色遮挡层，大图片跟随移动功能。
?
// 1.鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能
// 就是显示与隐藏
?
// 当页面全部加载执行完毕后再执行js代码
window.addEventListener('load', function() {
?? ??? ??? ?var preview_img = document.querySelector('.preview_img');
?? ??? ??? ?var mask = document.querySelector('.mask');
?? ??? ??? ?var big = document.querySelector('.big');
?
?? ??? ??? ?//2.当我们鼠标经过 preview_img 就显示和隐藏mask遮挡层和 big 大盒子
?? ??? ??? ?preview_img.addEventListener('mouseover', function() {
?? ??? ??? ??? ?mask.style.display = 'block';
?? ??? ??? ??? ?big.style.display = 'block';
?? ??? ??? ?})
?? ??? ??? ?preview_img.addEventListener('mouseout', function() {
?? ??? ??? ??? ?mask.style.display = 'none';
?? ??? ??? ??? ?big.style.display = 'none';
?? ??? ??? ?})
?
?? ??? ??? ?// 黄色的遮挡层跟随鼠标功能。
?? ??? ??? ?// 把鼠标坐标给遮挡层不合适。因为遮当层坐标以父盒子为准。
?? ??? ??? ?// 首先是获得鼠标在盒子的坐标
?? ??? ??? ?// 之后把数值给遮挡层做为left和top值。
?? ??? ??? ?// 此时用到鼠标移动事件，但是还是在小图片盒子内移动。
?
?? ??? ??? ?// 2.鼠标移动的时候,让黄色的盒子跟着鼠标来走
?? ??? ??? ?preview_img.addEventListener('mousemove', function(e) {
?? ??? ??? ??? ?//(1).先计算出鼠标在盒子里的坐标
?? ??? ??? ??? ?// 先算出鼠标在页面中的坐标,减去盒子距离左侧的距离,就是鼠标在盒子里的坐标
?? ??? ??? ??? ?// 但是这里要注意:
?? ??? ??? ??? ?// 要看他有没有父元素,并且父元素有没有定位
?
?? ??? ??? ??? ?var x = e.pageX - this.offsetLeft;
?? ??? ??? ??? ?var y = e.pageY - this.offsetTop;
?? ??? ??? ??? ?// console.log(x,y)
?? ??? ??? ??? ?//(2)盒子高度 300的一半 150
?? ??? ??? ??? ?// (3)mask移动的距离
?? ??? ??? ??? ?var maskX = x - mask.offsetWidth / 2;
?? ??? ??? ??? ?var maskY = y - mask.offsetHeight / 2;
?
?? ??? ??? ??? ?// (4)遮挡层不能超出小图片盒子范围
?? ??? ??? ??? ?// 如果小于0,就把坐标设置为0
?
?? ??? ??? ??? ?//遮挡层的最大一定距离,因为都是正方形,所以高也适用
?? ??? ??? ??? ?var maskMax = preview_img.offsetWidth - mask.offsetWidth;
?? ??? ??? ??? ?if (maskX <= 0) {
?? ??? ??? ??? ??? ?maskX = 0
?? ??? ??? ??? ??? ?//如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
?? ??? ??? ??? ??? ?//遮挡层的最大移动距离:小图片盒子宽度减去遮挡层盒子宽度
?? ??? ??? ??? ?} else if (maskX >= maskMax) {
?? ??? ??? ??? ??? ?maskX = maskMax;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if (maskY <= 0) {
?? ??? ??? ??? ??? ?maskY = 0;
?? ??? ??? ??? ??? ?//如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
?? ??? ??? ??? ??? ?//遮挡层的最大移动距离:小图片盒子宽度减去遮挡层盒子宽度
?? ??? ??? ??? ?} else if (maskY >= maskMax) {
?? ??? ??? ??? ??? ?maskY = maskMax;
?? ??? ??? ??? ?}
?
?? ??? ??? ??? ?mask.style.left = maskX + 'px';
?? ??? ??? ??? ?mask.style.top = maskY + 'px';
?
?
?? ??? ??? ??? ?// 移动黄色遮挡层, 大图片跟随移动功能
?? ??? ??? ??? ?// 求大图片的移动距离公式:
?? ??? ??? ??? ?// ?? ?遮挡层移动距离 / 遮挡层最大移动距离 = 大图片移动距离 / 大图片最大移动距离
?? ??? ??? ??? ?// 3.大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离
?? ??? ??? ??? ?var bigImg = document.querySelector('.bigImg'); //大图
?? ??? ??? ??? ?//大图片最大移动距离
?? ??? ??? ??? ?var bigMax = bigImg.offsetWidth - big.offsetWidth;
?? ??? ??? ??? ?//大图片最大移动距离
?? ??? ??? ??? ?var bigX = maskX * bigMax / maskMax;
?? ??? ??? ??? ?var bigY = maskY * bigMax / maskMax;
?? ??? ??? ??? ?bigImg.style.left = -bigX + 'px';
?? ??? ??? ??? ?bigImg.style.top = -bigY + 'px';
?? ??? ??? ?})
?
?})

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

查看更多关于用javascript实现放大镜效果的详细内容...