[原创] JQ仿淘宝图片局部放大镜效果_仿淘宝图片放大镜效果代码-CSDN博客

本文链接：https://blog.csdn.net/ydx425/article/details/52421719

有的时候我们需要在页面中展示一些高清大图，但是如果直接放在页面中又会显得很占地方，影响用户体验
或者在一些商城网站中，我们需要展示商品的高清大图，所以就需要一个类似放大镜的效果

原理很简单，首先加载一个略缩图，提高页面加载速度，然后在鼠标划过略缩图的时候创建一个div来控制背景的background-position的范围展示局部大图，具体代码如下:

<!--
* 作者：罗旧的博客
* 网址：http://www.haoshuzx.com
* 时间：2016-08-29
* e-mail：ydx425@gmail.com
-->

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片放大插件</title>
    <script src="jquery-2.1.4.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            float: left;
        }

        .wrap {
            overflow: hidden;
            margin: 50px 0 0 50px;
            position: relative;
        }

        .wrap img {
            border: 1px solid #ccc;
        }

        .wrap span {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.3);
            display: none;
        }

        .zoom {
            width: 500px;
            height: 500px;
            border: 1px dashed #ccc;
            background: url("001.jpg") no-repeat;
            background-position: center center;
            margin-top: 50px;
            display: none;
        }
    </style>
</head>
<body>
<div class="wrap left">
    <img src="001_thumb.jpg" alt="略缩图"/>
    <span></span>
</div>
<div class="zoom left"></div>

<script>
    (function ($) {
        $.fn.zoom = function () {
            var img = $(this).find("img");
            var span = $(this).find("span");
            var zoom = $(".zoom");
            //获取略缩图相对于窗口的位置
 var tLeft = $(img).offset().left;
            var tTop = $(img).offset().top;

            $(this).mousemove(function (e) {
                //获取鼠标坐标
 var mLeft = e.clientX;
                var mTop = e.clientY;

                //计算鼠标相对于图片区域的位置
 var l = mLeft - tLeft;
                var t = mTop - tTop;

                //鼠标移动时移动span
 $(span).css({
                    "display": "block",
                    "left": (l - 25) + "px",
                    "top": (t - 25) + "px"
 });

                //计算偏移量
 var ll = (l / $(img).width()) * 100 + "%";
                var tt = (t / $(img).height()) * 100 + "%";

                //设置大图偏移
 $(zoom).css({
                    "display": "block",
                    "background-position": ll + " " + tt
 })
            });

            //解除绑定
 $(this).mouseout(function () {
                $(span).css("display", "none");
                $(zoom).css("display", "none");
            })
        }
    })(jQuery);

    $(".wrap").zoom();
</script>

</body>
</html>