实现功能：

模仿淘宝图片放大效果，鼠标移动到小图片的某一处，放大镜对应显示大图片的相应位置。

实现效果：

实现代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>图片放大镜效果</title>

        <script type="text/javascript" src="../js/jquery-3.2.1.min.js" ></script>

        <style>

            .min{

                width: 350px;

                height: 350px;

                border: 1px solid black;

                float: left;

                position: relative;

                margin: 50px 0 0 30px;

            }

            .max{

                width: 350px;

                height: 350px;

                border: 1px solid black;

                float: left;

                display: none;

                overflow: hidden;

                position: relative;

                margin-left:30px ;

            }

            .max img{

                position: absolute;

                margin: 0 auto;

            }

            .fd{

                width: 153.125px;

                height: 153.125px;

                background-color: skyblue;

                opacity: 0.3;

                position: absolute;

                top: 0;

                left: 0;

                display: none;

                cursor: move;

            }

        </style>

    </head>

    <body>

        <div class="min">

            <img src="../img/0.jpg" width="350px" height="350px"/>

            <div class="fd"></div>

        </div>

        <div class="max">

            <img src="../img/0.jpg"/>

        </div>

        <script>

            var min = document.querySelector(".min");

            var max = document.querySelector(".max");

            var img = document.querySelector(".max img");

            var fd = document.querySelector(".fd");

            min.onmouseover = function(){

//                1.鼠标覆盖显示max和fd

                max.style.display = "block";

                fd.style.display = "block";

            }

//            离开时隐藏

            min.onmouseout = function(){

                max.style.display = "none";

                fd.style.display = "none";

            }

//            2. fd的移动范围

            min.onmousemove = function(){

//                鼠标触摸的点

                var x = event.clientX-min.offsetLeft-fd.offsetWidth/2;

                var y = event.clientY-min.offsetTop-fd.offsetHeight/2;

//                最大移动距离

                var maxX = min.clientWidth-fd.offsetWidth;

                var maxY = min.clientHeight-fd.offsetHeight;

//                边界判断

                if (x <= 0) {

                    x = 0;

                }else if (x >= maxX) {

                    x = maxX;

                }

                if (y <= 0) {

                    y = 0;

                }else if (y >= maxY) {

                    y = maxY;

                }

//                fd的位置

                fd.style.left = x+'px';

                fd.style.top = y+'px';

                //fd/min = max/img

                //移动比例

                var moveX = x/maxX;

                var moveY = y/maxY;

//                移动

//                3. max的对应显示

//                对于大图而言,放大镜在小图上移动的比例相当于img在可显示区域上移动的比例

//                放大镜右移等于图片左移

//                也就是本质上为img-max 然而而需要负值,则*-1简化后为max-img

                img.style.left = moveX*(max.clientWidth - img.offsetWidth) + 'px';

                img.style.top = moveY*(max.clientHeight - img.offsetHeight) + 'px';

            }

        </script>

    </body>

</html>

【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果的更多相关文章

  1. Jquery图片放大镜

    一般在“在线商城.电子商务.企业产品介绍”等地方经常会看到一些图片放大镜的功能,而做这个功能一般是会用一个js包——enlarge.js(这是jquery图片放大镜的插件).Enlarge 是一个基于 ...

  2. jquery图片放大镜和遮罩层效果

    图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...

  3. jquery图片查看插件，支持旋转、放大、缩小、拖拽、缩略图（仿qq图片查看）

    最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. ...

  4. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  5. 仿淘宝分页按钮效果简单美观易使用的JS分页控件

    分页按钮思想:  1.少于9页,全部显示  2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码  附件中有完整例子的压缩包下载.已更新到最新版本  先看效果图:  01输入框焦点效果  ...

  6. 漂亮！Javascript代码模仿淘宝宝贝搜索结果的分页显示效果

    分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager  JS ...

  7. Jquery插件开发之图片放大镜效果(仿淘宝)

    原网转载地址:http://www.cnblogs.com/hnvvv/archive/2011/11/19/2255197.html 需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部 ...

  8. 基于jQuery仿淘宝产品图片放大镜代码

    今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safa ...

  9. 基于jQuery仿淘宝产品图片放大镜特效

    在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...

随机推荐

  1. Oracle下where子句

    课外题 要求:删除某一个用户,同时保留该用户的数据?如何解决 alter user scott account lock :改天需要使用则解锁unlock 锁定用户使用sysdba登录还是可以查看数据 ...

  2. 【优先队列】POJ2010- Moo University-Financial Aid

    [题目大意] 给出C头奶牛的SAT成绩和申请奖学金,选出N头牛,使得总奖学金在≤F的情况下奶牛SAT成绩的中位数最大. [思路] 假设before[i]表示前i头奶牛中n/2头奶牛奖学金总额的最小值, ...

  3. Python开发【Tornado】：异步Web服务（一）

    异步Web服务 前言: 到目前为止,我们已经看到了许多使Tornado成为一个Web应用强有力框架的功能.它的简单性.易用性和便捷性使其有足够的理由成为许多Web项目的不错的选择.然而,Tornado ...

  4. ASP.netMVC文件下载的几种方法

    第一种:最简单的超链接方法,标签的href直接指向目标文件地址,这样容易暴露地址造成盗链,这里就不说了 第二种:后台下载 在后台下载中又可以细分为几种下载方式 首先,在前台,我们需要一个标签 &quo ...

  5. docker搭建oracle 11.2.0.3.0

    dockerfile 如下: FROM oraclelinux:-slim ARG ORACLE_BASE=/opt/oracle ARG ORACLE_HOME=/opt/oracle/produc ...

  6. MySQL中数据表的查操作

    查询数据表的全部内容 mysql> show tables;#查看当前数据库下的全部表 +--------------------+ | Tables_in_ceshi_ku | +------ ...

  7. Mybatis分页查询与动态SQL

    一.Mybatis的分页查询 由于第一二节较为详细讲述了Mybatis的环境搭建,文件配置,SQL编写和Java代码实现,所以接下来的讲述都将只抽取关键代码和mapper文件中的关键sql,详细的流程 ...

  8. mysql索引之哈希索引

    哈希算法 哈希算法时间复杂度为O(1),且不只存在于索引中,每个数据库应用中都存在该数据结构. 哈希表 哈希表也为散列表,又直接寻址改进而来.在哈希的方式下,一个元素k处于h(k)中,即利用哈希函数h ...

  9. java switch参数类型

    switch: switch语句是根据选择因子实现多路选择(也就是说从一系列执行路径中挑选一个)的一种干净利落的方法. 1.java5之前: switch只能使用能自动转化为int类型的参数:byte ...

  10. python 字典(dict)get方法应用

    如果我们需要获取字典值的话,我们有两种方法,一个是通过dict['key'],另外一个就是dict.get()方法. 今天给大家分享的就是字典的get()方法. 这里我们可以用字典做一个小游戏,假设用 ...