前面有一章节介绍了使用html+css实现小兔鲜儿网页案例，但是这是一个纯静态网页。最近因为又补充学习了一下前端基础知识WebAPI篇，看到了老师实现的放大镜效果和固定侧边栏效果，因此，突发奇想，直接在小兔鲜儿案例上实现了上述两种功能。

　　首先，先看下商品详情页面的放大镜效果是什么样子的。由于手上没有太多图片，所以两侧图片只是设置了不同尺寸来展现放大镜效果。图像放大镜的原理是鼠标经过左侧小图片盒子，出现黄色遮盖，然后右侧大图片展示。鼠标移出左侧区域，两个显示出来的区域被隐藏。黄色遮盖会随着鼠标的移动而移动，并且大图片也跟随移动。

图一、商品放大镜效果

　　前面的使用html+css初步完成小兔鲜儿案例中中给出了静态页面的代码，这里在此基础上写了个简单的商品详情页展示放大镜效果。首先看下新增放大镜效果后项目结构是什么样子的。上面标注颜色的地方为新增详情页放大镜效果的代码。其中animate.js为侧边栏效果代码，下一个博客将进行介绍。

 

 

 

首先在index.html的商品列表展示模块的一个吸尘器图片a标签处添加了跳转页面到详情页功能，代码如下所示：

<a href="./details.html">
     <img src="./uploads/new_goods_1.jpg" alt="">
     <h3>无线吸尘器</h3>
     <p><span>¥</span> 899</p>
</a>

商品详情页detail.html如下所示

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <title>商品放大镜效果</title>
  8     <script src="./js/detail.js"></script>
  9     <style>
 10         * {
 11             margin: 0;
 12             padding: 0;
 13         }
 14         body {
 15             background-color: #fff;
 16             font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
 17             color: #666
 18         }
 19         /*清除浮动*/
 20         .clearfix:after {
 21             visibility: hidden;
 22             clear: both;
 23             display: block;
 24             content: ".";
 25             height: 0
 26         }
 27         .clearfix {
 28             *zoom: 1
 29         }
 30         .mmm {
 31             width: 1200px;
 32             margin: 0 auto;
 33         }
 34         .detail-container {
 35             margin-top: 20px;
 36             margin-left: 20px;
 37         }
 38         .preview_wrap {
 39             width: 400px;
 40             height: 590px;
 41         }
 42         .fl {
 43             float: left;
 44         }
 45         .preview_img {
 46             position: relative;
 47             height: 398px;
 48             border: 1px solid #ccc;
 49         }
 50         img {
 51             display: block;
 52             width: 50%;
 53             border: 0;
 55             margin: 100px auto;
 56         }
 57         .mask {
 58             display: none;
 59             position: absolute;
 60             top: 0;
 61             left: 0;
 62             width: 260px;
 63             height: 260px;
 64             background-color: #efde4f;
 65             opacity: 0.5;
 66             cursor: move;
 67         }
 68         .big {
 70             position: absolute;
 71             left: 410px;
 72             top: 0;
 73             width: 500px;
 74             height: 500px;
 76             z-index: 999;
 77             border: 1px solid #ccc;
 78             overflow: hidden;
 79         }
 80         .big img {
 81             position: absolute;
 82             top: 0;
 83             left: 0;
 84             width: 90%;
 85             margin: 10px;
 86         }
 87         .itemInfo_wrap {
 88             width: 518px;
 89         }
 90         .fr {
 91             float: right;
 92         }
 93     </style>
 94 </head>
 95 <body>
 96     <div class="detail-container mmm">
 97         <!-- 展示列表 -->
 98         <span>商品详情 ></span> 吸尘器
 99         <div class="product_intro clearfix">
100             <!-- 预览区域 -->
101             <div class="preview_wrap fl">
102                 <div class="preview_img">
103                     <img src="./uploads/new_goods_1.jpg" alt="">
104                     <!-- 遮盖层 -->
105                     <div class="mask"></div>
106                     <div class="big">
107                         <img src="./uploads/new_goods_1.jpg" alt="" class="bigImg">
108                     </div>
109                 </div>
110             </div>
111             <!-- 产品详情区域 -->
112             <div class="itemInfo_wrap fr">
113                 哈哈哈哈或或或或，这边没有详情
114             </div>
115         </div>
116     </div>
117 </body>
118 </html>

下面是detail.js代码

window.addEventListener('load', function() {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 1、当鼠标经过preview_img就显示mask遮挡层和big大盒子
    preview_img.addEventListener('mouseover', function() {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    // 2、当鼠标离开preview_img就隐藏mask遮挡层和big大盒子
    preview_img.addEventListener('mouseout', function() {
        mask.style.display = 'none';
        big.style.display = 'none';
    });

    preview_img.addEventListener('mousemove', function(e) {
        // 1、先计算鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;   // 鼠标据页面的距离 - 盒子左侧的距离（需要看有没有定位） = 鼠标在盒子内的距离
        var y = e.pageY - this.offsetTop;
        // console.log(this.offsetLeft);
        // 2、减去盒子高度的一半，就是mask的left和top了
        // 3、mask移动的距离赋值--鼠标在遮盖层中心位置
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // 遮挡层最大移动距离 (因为盒子和遮挡层都是正方形，所以宽高最大距离相同）-- 就是鼠标移动区域盒子（preview_img的宽高）-遮盖层的宽高
        var maskMax = this.offsetHeight - mask.offsetHeight;
        //4、如果x坐标小于0 ，就让他停在0的位置
        if (maskX < 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {  // mask盒子 left最大距离左侧的距离是盒子的宽度-mask的宽度
            maskX = maskMax;
        } 
        if (maskY < 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {  // mask盒子 left最大距离左侧的距离是盒子的宽度-mask的宽度
            maskY = maskMax
        } 
        mask.style.left = maskX + 'px';   // 将mask中间点位于鼠标位置，则mask的left和top - mask的宽高
        mask.style.top = maskY + 'px';
        // 放大镜的大图片移动距离 = （遮挡层移动距离（maskX和maskY） * 放大镜大图片最大移动距离）/ 遮挡层最大移动距离（就是移动后，遮挡层不能超过盒子的范围，遮挡层left/top的距离）
        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';

    });

})

这里记录一个小知识点，加深下自己的记忆力

　　1、mouseover 经过自身盒子和子盒子都会触发鼠标事件
　　2、mouseenter只会经过自身盒子触发，和mouseleave搭配

　　3、window.addEvevtListener(‘load’, function(){})，是在页面文档完全加载完毕后执行里面的函数。

好了，到这里商品详情页放大镜效果就实现了。

 

原文地址：http://www.cnblogs.com/gjw0818/p/16928306.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性