js、jquery实现放大镜效果

在一些电商网站的商品详情页面，都会有放大镜效果，实现起来并不是很困难，今天用了两个小时，写了一个放大镜效果的实例，来分享给大家！

实现的效果大概是这个样子的

预览

先来看一下效果吧，点击下面的链接预览动态的效果！

http://sandbox.runjs.cn/show/vbu6ebq2

代码实现过程：

1. html部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>商品详情放大镜效果</title>
    <script type="text/javascript" src="js/jquery/jquery-3.2.1.js"></script>
</head>
<body>
<div class="container">
    <h2>商品详情放大镜效果</h2>
    <div class="magnifierContainer">
        <div class="imgLeft">
            <!-- 中号图片 -->
            <div class="imgMedium" id="imgMedium">
                <!-- 放大镜 -->
                <div class="magnifier" id="magnifier">
                    <img src="http://product.dangdang.com/images/zoom_pup.png">
                </div>
                <!-- 图片 -->
                <div class="mediumContainer" id="mediumContainer">
                    <img src="http://img3m3.ddimg.cn/2/21/22628333-1_w_2.jpg">
                </div>    
                <div id="zhezhao"></div>            
            </div>
            
            <!-- 缩略图 -->
            <ul class="img_x" id="img_x">
                <li><img src="http://img3m3.ddimg.cn/2/21/22628333-1_x_2.jpg"></li>
                <li><img src="http://img3m3.ddimg.cn/2/21/22628333-2_x_2.jpg"></li>
                <li><img src="http://img3m3.ddimg.cn/2/21/22628333-3_x_2.jpg"></li>
                <li><img src="http://img3m3.ddimg.cn/2/21/22628333-4_x_2.jpg"></li>
                <li><img src="http://img3m3.ddimg.cn/2/21/22628333-5_x_2.jpg"></li>
            </ul>
        </div>
        <div class="imgRight">
            <!-- 大图 -->
            <div class="img_u" id="img_u">
                <img src="http://img3m3.ddimg.cn/2/21/22628333-1_u_2.jpg">
            </div>
        </div>        
    </div>
</div>
</body>
</html>

2. css部分

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    .container {
        width: 850px;
        margin: 50px auto;
        text-align: center;
    }
    .magnifierContainer {
        display: flex;
        margin-top: 30px;
    }
    .imgMedium {
        position: relative;
    }
    .imgLeft .magnifier {
        position: absolute;
        display: none;
        width: 200px;
        height: 200px;
    }
    .mediumContainer {
        width: 350px;
        height: 350px;
        border: 1px solid #eee;
        overflow: hidden;
    }
    #zhezhao {
        width: 350px;
        height: 350px;
        background: transparent;
        position: absolute;
        top: 0;
        border: 1px solid transparent;
    }
    #zhezhao:hover {
        cursor: move;
    }
    .img_x {
        width: 350px;
        height: 77px;
        border: 1px solid #eee;
        margin-top: 20px;
        display: flex;
    }
    .img_x li{
        width: 54px;
        height: 54px;
        border: 2px solid transparent;
        margin: 8px 4px;
        padding: 2px;
    }
    .img_u {
        width: 500px;
        height: 450px;
        border: 1px solid #eee;
        float: left;
        margin-left: 15px;
        overflow: hidden;
        display: none;
    }
</style>

3. js部分

<script type="text/javascript">
    $(\'#img_x li\').eq(0).css(\'border\', \'2px solid coral\');
    $(\'#zhezhao\').mousemove(function(e){
        $(\'#img_u\').show();
        $(\'#magnifier\').show();
        var left = e.offsetX - parseInt($(\'#magnifier\').width()) / 2;
        var top = e.offsetY - parseInt($(\'#magnifier\').height()) / 2;
        left = left < 0 ? 0 : left;
        left = left > (parseInt($(\'#zhezhao\').outerWidth()) - parseInt($(\'#magnifier\').outerWidth())) ? (parseInt($(\'#zhezhao\').outerWidth()) - parseInt($(\'#magnifier\').outerWidth())) : left;
        top = top < 0 ? 0 : top;
        top = top > (parseInt($(\'#zhezhao\').outerHeight()) - parseInt($(\'#magnifier\').outerHeight())) ? (parseInt($(\'#zhezhao\').outerHeight()) - parseInt($(\'#magnifier\').outerHeight())) : top;

        $(\'#magnifier\').css(\'left\', left + \'px\');
        $(\'#magnifier\').css(\'top\', top + \'px\');

        var leftRate = left / parseInt($(\'#zhezhao\').outerWidth());
        var bigLeft = leftRate * parseInt($(\'#img_u img\').outerWidth());
        $(\'#img_u img\').css(\'margin-left\', -bigLeft + \'px\');

        var topRate = top / parseInt($(\'#zhezhao\').outerHeight());
        var bigTop =  topRate * parseInt($(\'#img_u img\').outerHeight());
        $(\'#img_u img\').css(\'margin-top\', -bigTop + \'px\');
    })
    $(\'#zhezhao\').mouseleave(function(){
        $(\'#img_u\').hide();
        $(\'#magnifier\').hide();
    })

    $(\'#img_x li\').mouseover(function(){
        $(this).css(\'border\', \'2px solid coral\').siblings().css(\'border\', \'2px solid transparent\');
        $(\'#mediumContainer img\').eq(0).attr(\'src\', \'http://img3m3.ddimg.cn/2/21/22628333-\' + ($(this).index()+1) + \'_w_2.jpg\');
        $(\'#img_u img\').eq(0).attr(\'src\', \'http://img3m3.ddimg.cn/2/21/22628333-\' + ($(this).index()+1) + \'_u_2.jpg\');
    })
</script>

实现过程中需要注意的地方：

在实现放大镜在图片上移动时，我给商品图片绑定了mousemove鼠标移动事件，当鼠标移动的同时，也移动放大镜，但是效果却不是想象的样子，会有一些卡顿、闪烁的现象

当鼠标在商品图片上移动时，放大镜也随之移动，当鼠标在放大镜图片上时，则不会移动，这是因为绑定mousemove事件的是商品图片，而不是放大镜图片，而放大镜图片所在的图层在商品图片之上，所以当鼠标移动到放大镜图片上时，就不会触发mousemove事件，从而就出现了卡顿的现象。

那么，怎样解决呢？

我又加了一个div，这个div的大小和商品图片的div的大小一样，背景色为透明色，图层在最上面，然后给这个透明的div绑定mousemove事件，放大镜图片就会流畅的移动了。

在线调试

如需在线调试请点击下面的链接！

http://runjs.cn/code/vbu6ebq2

如果对您有帮助，记得点赞哦！需要您的支持与鼓励，同时也欢迎您留下宝贵意见！