实现图片放大镜的原理：

  1. 给放大镜元素一个对应的html元素为<div class='right'>
  2. 设置这个div的宽高固定为某个值（350px，350px）
  3. 设置div的css为超出部分隐藏
  4. div中嵌套子元素img设置宽高固定为某个值（2560px，1600px）
  5. 通过数学函数计算，移动div的x轴和y轴的滚动条，正好让放大镜显示刺客鼠标在大图的那一块区域。

部分函数功能介绍：

attr()方法：获取或更改对应的DOM元素的属性值

  • 获取：$("div").attr("属性名称")
  • 更改：$("div").attr("属性名称","属性值")

mouseover()：鼠标移入事件

mouseout()：鼠标移出事件

scrollTop()：获取或设置匹配元素相对滚动条顶部的偏移

scrollLeft()：获取或设置匹配元素相对滚动条左侧的偏移

源代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>jQuery实现放大镜效果</title>

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

        <style>

            #contain{

                width:80%;

                height:500px;

                margin:0 auto;

            }

            .left{

                float:left;

            }

            .right{

                float:left;

                width:350px;

                height:350px;

                overflow:hidden;/*超出部分隐藏*/

                padding:0px;

                display:none;/*默认先不显示*/

            }

            .up{

                width:320px;

                height:200px;

                padding:30px;

            }

            .up img{

                width:320px;

                height:200px;

            }

            .down{

                padding:20px;

                padding-left:35px;

            }

            .down img{

                width:64px;

                height:40px;

                border:3px solid #ccc;

            }

        </style>

    </head>

    <body>

        <div id="contain">

            <div class="left">

                <div class="up">

                    <img src="img/06.jpg" bigimage>

                </div>

                <div class="down">

                    <img src="img/06.jpg" smallimage>

                    <img src="img/07.jpg" smallimage>

                    <img src="img/08.jpg" smallimage>

                    <img src="img/09.jpg" smallimage>

                </div>

            </div>

            <div class="right">

                <img src="" mirror>

            </div>

        </div>

    </body>

    <script>

        /**

         * 完成下面选择图片的效果：

         *         1.当鼠标放置在下面的小图片时，改变边框属性

         *         2.更改含有bigimage的img标签的src，进行图片更换

         */

        $("[smallimage]").mouseover(function(){

            var address = $(this).css("border","3px solid red").attr("src");

            $("[bigimage]").attr("src",address);

        }).mouseout(function(){

            $(this).css("border","3px solid #ccc");

        });

        /**

         * 大图鼠标移动事件：

         *         1.设置mirror所在的img标签的display属性为block，即让它显示

         *         2.当鼠标在内部移动的时候，通过计算，在mirror中进行放大显示

         * 鼠标移出事件：

         *         设置mirror不可见 display:none

         */

        $("[bigimage]").mousemove(function(even){

            //获取大图的相对文档的偏移量

            var offset = $(this).offset();

            //获取鼠标相对于大图左上角的x轴偏移量

            var x = even.pageX - offset.left;

            //获取鼠标相对于大图左上角的y轴偏移量

            var y = even.pageY - offset.top;

            //设置放大镜放大倍数，可自行设置

            var multiple = 8;

            //获取放大镜所在div的宽度和高度

            var mirrorwidth = $(".right").width();

            var mirrorHeight = $(".right").height();

            //获取bigimage此时的src的值

            var address = $(this).attr("src");

            //更改放大镜的src的值，切换图片

            $("[mirror]").attr("src",address);

            $(".right").css("display","block").scrollLeft(Math.max(x*multiple - mirrorwidth/2.0)).scrollTop(Math.max(y*multiple - mirrorHeight/2.0));

        }).mouseout(function(){

            $(".right").css("display","none");

        });

    </script>

</html>

效果图：

1.鼠标经过下面的小图片：

2.放大效果：

jQuery实现图片放大镜效果的更多相关文章

  1. 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果

    实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...

  2. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  3. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  4. WPF设置VistualBrush的Visual属性制作图片放大镜效果

    原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...

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

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

  6. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

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

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

  8. 关于jQuery中实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  9. jQuery插件:图片放大镜--jQuery Zoom

    本文转载于http://blog.csdn.net/xinhaozheng/article/details/4085644, 这是一款非常不错的给图片添加放大镜效果,可以应用在诸如zen cart,m ...

随机推荐

  1. Python 之并发编程之进程下（事件(Event())、队列（Queue）、生产者与消费者模型、JoinableQueue）

    八:事件(Event()) # 阻塞事件:    e = Event() 生成事件对象e    e.wait() 动态给程序加阻塞,程序当中是否加阻塞完全取决于该对象中的is_set() [默认返回值 ...

  2. 巧用DOS命令合并多个文本文件的内容

    假设,在网上下载了一本小说.这本小说是由100多个文本文件组成的.这个时候,将这100多个文本文件的内容全部合并到一个文本文件中,阅读起来就会显得很方便     (1)首先,使用本书中“批量按序更改文 ...

  3. 使MVC路由表无效

    protected void Application_Start() { AreaRegistration.RegisterAllAreas(); WebApiConfig.Register(Glob ...

  4. 洛谷 P3320 [SDOI2015]寻宝游戏

    因为寻宝路径是一个环,所以寻宝花费的最小时间与起点无关.宝应当按照所有宝藏所在位置的 dfs 序进行才能够使得花费的时间最短.设 \(dist_i\) 表示 \(i\) 到树根的最短距离,那么树上任意 ...

  5. springboot,dubbo,nacos,spring-cloud-alibaba的整合

    最近,自去年阿里开源了dubbo2.7及一系列产品后,阿里也打造了融入spring-cloud 的生态体系,本人关注,今年阿里开源的的spring-cloud-alibaba基本孵化完成,笔者更是对这 ...

  6. 本地模拟内存溢出并分析Dump文件

    java Dump文件分析 前言 dump文件是java虚拟机内存在某一时间点的快照文件,一般是.hprof文件,下面自己模拟一下本地内存溢出,生成dump文件,然后通过mat工具分析的过程. 配置虚 ...

  7. memcached 和 redis 性能测试比对

    网上很多关于memcached 和 redis 区别的介绍,大部分都是说redis比memcached支持的数据类型多的话题,而性能比对确很少,我专门针对两者进行了性能测试比对. 测试内容如下: 两者 ...

  8. JAVA虚拟机：内存各个区介绍

    概述:java应用程序由java虚拟机自动管理程序执行期间内存管理. 优势:1.不再需要程序员去为使用的内存在程序中手动编写释放内存代码. 2.由虚拟机管理内存不容易出现内存泄漏和内存溢出的问题. 缺 ...

  9. CSP-J/S2019试题选做

    S D1T2 括号树 设\(f[u]\)表示根到\(u\)的路径上有多少子串是合法括号串.(即题目里的\(k_u\),此变量名缺乏个性,故换之) 从根向每个节点dfs,容易求出\(c[u]\):表示从 ...

  10. Django-路由Routers-SimpleRouter-DefaultRouter使用方法

    路由Routers 对于视图集ViewSet,我们除了可以自己手动指明请求方式与动作action之间的对应关系外,还可以使用Routers来帮助我们快速实现路由信息. REST framework提供 ...