【小河今学 | HTML + CSS + JS + JQ】放大镜案例

08.23 今天作业写放大镜案例
放大镜组件常用在电商网站的商品页面中，用于使用户更好的查看商品，示例如下：

以下是案例最终完成效果：

一、布局

首先观察上述效果图可以看出我们一共需要三个部分，分别是缩略图部分，小图部分和大图部分。每个部分需要用到的图片的分辨率也不相同，需要自己调整，这里我缩略图的分辨率为80 x 100，小图分辨率为400 x 500，大图分辨率为1200 x 1500。
具体代码如下：

	<div class="contanier">
        <!-- 小图 -->
        <div class="small">
            <!-- 遮罩 -->
            <div class="mask"></div>
            <img src="/images/small1.png" alt="">
        </div>
        <!-- 缩略图 -->
        <div class="thums">
            <ul>
                <li><img src="/images/thum1.png" alt="thums"></li>
                <li><img src="/images/thum2.png" alt="thums"></li>
                <li><img src="/images/thum3.png" alt="thums"></li>
                <li><img src="/images/thum4.png" alt="thums"></li>
                <li><img src="/images/thum5.png" alt="thums"></li>
                <li><img src="/images/thum6.png" alt="thums"></li>
            </ul>
        </div>
        <!-- 放大图 -->
        <div class="big">
            <img src="/images/big1.png" alt="">
        </div>
    </div>

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.container {
    position: relative;
}

.mask {
    width: 200px;
    height: 200px;
    position: absolute;
    background-color: pink;
    opacity: 0.6;
    top: 0;
    left: 0;
}

.thums ul {
    width: 400px;
    text-align: center;
}

.thums ul li {
    display: inline-block;
    margin-right: 8px;
    
}

.thums ul li:last-child {
    margin-right: 0;
}

.thums ul li img {
    width: 40px;
    border: 2px solid transparent;
}

.thums ul li img:hover {
    border: 2px solid pink;
}

.big {
    width: 600px;
    height: 600px;
    position: absolute;
    left: 410px;
    top: 0;
    overflow: hidden;
}

.big img {
    position: absolute;
}

二、逻辑

逻辑部分主要实现

1. 鼠标移入缩略图后将小图和大图换成缩略图所对应的图，这里注意将得到的src进行切割取数字。

2. 遮罩随鼠标在小图上移动，这里注意当靠近边框时，遮罩是不会超出去的。
   

3. 大图跟随遮罩移动显示，这里注意要根据两张图的比例来调整移动显示。

具体代码如下

;(function($){
    // 同步图片
    $('.thums img').mouseover(function () { 
        // console.log($(this).attr('src'))
        // 获取到当前图片的路径
        var thumsImg = $(this).attr('src');
        // 把获取到的图片路径提取对应数字
        var thumsImgNum = thumsImg.substr(12,1);
        // 将获取到的数字覆盖小图和大图的路径
        $('.small img').attr('src', '/images/small' + thumsImgNum + '.png');
        $('.big img').attr('src', '/images/big' + thumsImgNum + '.png');
    });

    // 鼠标移动到小图上时，让遮罩方块跟着移动
    $('.small').mousemove(function (e) { 
        var mouseX = e.pageX - $('.mask')[0].clientWidth/2;
        var mouseY = e.pageY - $('.mask')[0].clientHeight/2;
        // 让遮罩控制在小图内不超出
        if(mouseX < 0){
            mouseX = 0;
        }else if(mouseX > $('.small img')[0].clientWidth - $('.mask')[0].clientWidth){
            mouseX = $('.small img')[0].clientWidth - $('.mask')[0].clientWidth;
        }
        if(mouseY < 0){
            mouseY = 0;
        }else if(mouseY > $('.small img')[0].clientHeight - $('.mask')[0].clientHeight){
            mouseY = $('.small img')[0].clientHeight - $('.mask')[0].clientHeight;
        }

        $('.mask').css({
            'left': mouseX,
            'top': mouseY
        })

        // 让大图跟着移动
        $('.big img').css({
            'left': mouseX * -3 + 'px',
            'top' : mouseY * -3 + 'px'
        })
    });
})(jQuery);