简单商品橱窗放大效果

前端入坑纪 38

眼看着明天便是周末了，来个类似淘宝橱窗展示 那样的简单效果。
感兴趣的，接着往下看哦！这次特意画了图来解释鼠标的“走位”！

OK，first things first！项目链接

喵星人的绝美睡颜

HTML 结构

    <div class="mWrp">
        <div class="navImgsWrp">
            <div id="imgsWrp" class="outWrp">
                ![](wrap/img/pic00.jpg)
            </div>
            <ul class="navImg clear">
                <li>
                    <a href="javascript:;" data-src="wrap/img/pic01.jpg">
                        ![](wrap/img/pic01_nail.jpg)
                    </a>
                </li>
                <li>
                    <a href="javascript:;" data-src="wrap/img/pic02.jpg">
                        ![](wrap/img/pic02_nail.jpg)
                    </a>
                </li>
                <li>
                    <a href="javascript:;" data-src="wrap/img/pic03.jpg">
                        ![](wrap/img/pic03_nail.jpg)
                    </a>
                </li>
                <li>
                    <a href="javascript:;" data-src="wrap/img/pic04.jpg">
                        ![](wrap/img/pic04_nail.jpg)
                    </a>
                </li>
                <li>
                    <a href="javascript:;" data-src="wrap/img/pic05.jpg">
                        ![](wrap/img/pic05_nail.jpg)
                    </a>
                </li>
            </ul>
            <canvas id="can1" width="640" height="400"></canvas>
        </div>
    </div>

ul 里面的 li 都是左浮动，canvas 是相对于 navImgsWrp 绝对定位到 outWrp的右边。

CSS 结构

        body {
            padding: 0;
            margin: 0;
            border-top: 1px solid #f4f4f4;
            background-color: #F4F4F4;
        }
        
        p {
            padding: 0;
            margin: 0;
        }
        
        ul,
        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        a {
            text-decoration: none;
            color: #525252;
        }
        
        img {
            vertical-align: middle;
        }
        
        .fl {
            float: left;
        }
        
        .fr {
            float: right;
        }
        
        .clear::after {
            display: block;
            content: "";
            clear: both;
        }
        
        .mWrp {
            max-width: 1190px;
            margin: 0 auto;
        }
        
        .navImgsWrp {
            position: relative;
            margin-top: 6px;
            width: 40%;
            background-color: #f7f7f7;
            box-shadow: 0 0 3px #ccc, 0 0 6px #cfcfcf;
        }
        
        .navImg li {
            float: left;
            width: 18.5%;
            margin: 6px .75%
        }
        
        .navImg li a {
            display: block;
        }
        
        .navImg li img {
            width: 100%;
        }
        
        #can1 {
            position: absolute;
            right: -650px;
            top: 0;
            z-index: 9;
            display: none;
            box-shadow: 0 0 3px #ccc, 0 0 6px #f1f1f1;/*兴趣使然，写了个双阴影的效果*/
        }

JS 结构

        var can1 = document.getElementById('can1');
        var navImgsWrp = document.getElementsByClassName('navImgsWrp')[0];
        var imgsWrp = document.getElementById('imgsWrp');
        var targetImg = imgsWrp.getElementsByTagName('img')[0];
        var mls = document.getElementsByClassName('navImg')[0].getElementsByTagName('img');
        var ctx = can1.getContext('2d');
        
        // 创建个canvas要用到的图片对象
        var imgSource = new Image();

        // 当每个li 里的img鼠标滑过时，将橱窗图片变成这个图片，并且将img父级a上的data-src值赋给imgSource.src
        for (var i = 0; i < mls.length; i++) {
            mls[i].onmouseover = function() {
                targetImg.src = this.src;
                imgSource.src = this.parentNode.getAttribute("data-src");
            }
        }

        // 鼠标在imgsWrp滑过时，显示canvas
        imgsWrp.onmouseenter = function() {
            can1.style.display = "block";
        }

        // 鼠标滑出时，隐藏canvas
        imgsWrp.onmouseout = function() {
            can1.style.display = "none";
        }

        // 鼠标在imgsWrp移动时，对应canvas移动的距离，然后绘制到canvas里
        imgsWrp.onmousemove = function(evt) {
            var mouseX = evt.clientX - navImgsWrp.offsetLeft;// imgsWrp里鼠标的坐标 = 鼠标在视窗里滑动的坐标  减去  imgsWrp相对于视窗里的偏移（刚好是父级navImgsWrp的offsetLeft，offsetTop）
            var mouseY = evt.clientY - navImgsWrp.offsetTop;
            var sx = mouseX / imgsWrp.offsetWidth * 640;
            var sy = mouseY / imgsWrp.offsetHeight * 400;
            ctx.drawImage(imgSource, sx, sy, 640, 400, 0, 0, 640, 400)
        }

示意图

1. 大图是1280宽，800高
2. drawImage（图片对象，在原图截取点x的坐标，在原图截取点y的坐标，截取的宽度，截取的高度，canvas内开始绘制的点的x坐标，canvas内开始绘制的点的y坐标，绘制的宽度，绘制的高度）
3. 红框代表截取了原图最左上角时的状态，蓝框代表截取了原图最右下角时的状态。
4. 鼠标在imgsWrp里移动的过程中，mouseX，mouseY的变化 就是 对应了 示意图中 红点 与 蓝点 间的变化

不晓得这样描述，是否已经把这个表达清楚！感兴趣的小伙伴多多阅读体会下，也可以留言，互相交流！

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！