[原创] JQ仿淘宝图片局部放大镜效果

来源：互联网发布：windows内核安全编程编辑：程序博客网时间：2024/05/21 09:35

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

具体效果请点击这里：图片放大镜效果

原理很简单，首先加载一个略缩图，提高页面加载速度，然后在鼠标划过略缩图的时候创建一个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>

以上只是简单的实现了效果，在具体项目中，还需要根据实际情况设定大图的加载时间，是页面加载完成之后加载还是用户鼠标划过的时候才加载，可以根据实际需求判断，还需要考虑的就是zoom区域的位置，需要采用绝对定位来避免打乱现有的文档流样式.

点击这里下载源码：图片放大镜效果源码
本文为作者原创文章，转载请注明来自罗旧的博客,链接：http://www.haoshuzx.com/qianduan/43.html

0 0