京东等电商网站中可以对商品进行放大观察，本文要实现的就是模仿这个放大镜功能，大致效果如下图所示:

简要说明实现思路：

1.原图窗口与放大窗口插入的是同一个图片，不过原图窗口的图片要适当缩小，放大窗口图片保持原大小，超出部分设置隐藏

2.先定下放大比例，例如本文原图大小为1000*1000，可以把原图窗口的图片设为400*400，这样放大窗口就能实现2.5倍的放大效果了（两个窗口的大小是一样的！！都是400*400）

3.首先实现小框框跟着鼠标移动的功能（本文设置鼠标总是在小框框的中心位置）

4.再实现放大窗口中的图片随着小框框的移动实现自身移动

5.鼠标(小框框)向右移动，放大窗口中的图片是要向左移动的！他们的方向总是相反

6.小框框大小不是随意设置，与放大倍数有关，本文放大2.5倍，则原图窗口应该也是小框框大小的2.5倍，即小框框大小160*160

具体代码如下：
---------------------
作者：metoo9527
来源：CSDN
原文：https://blog.csdn.net/metoo9527/article/details/79100080
版权声明：本文为博主原创文章，转载请附上博文链接！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>简易放大镜的实现</title>

    <style>

        body,ul,li{padding: 0;margin: 0;list-style: none;}

        .orig,.fd{

            width: 400px;

            height: 400px;

            border:1px solid red;

            position: absolute;

        }

        .fd{

            left:410px;

            top:0;

            overflow: hidden;

            display: none;

        }

        .blocks{

            /*小图的宽高比例

                窗口的宽度 / 大图的宽度 * 窗口的宽度

            */

            width:160px;

            height:160px;

            background:rgba(254,238,167,.4);

            position: absolute;

            left: 0;

            top:0;

            display: none;

        }

    </style>

</head>

<body>

    <!-- 建立显示原图窗口 -->

    <div class="orig">

        <!-- 插入要放大的图片 -->

        <img src="./images/3.jpg" alt="" width="400">

        <!-- 加入用于锁定放大区域的小框框 -->

        <div class="blocks"></div>

    </div>

    <!-- 建立显示放大图片的窗口 -->

    <div class="fd"><img src="./images/3.jpg" alt="" style="position: absolute;">

    </div>

    <script src="./jquery-1.8.3.min.js"></script>

    <script>

        // 绑定鼠标移入原图窗口事件

        $('.orig').mouseover(function(e){

                $('.fd').css('display','block');

                $('.blocks').css('display','block');

        })

        //绑定鼠标在原图窗口移动的事件

        $('.orig').mousemove(function(e){

                // 获取鼠标当前的位置

                var x=e.clientX;

                var y=e.clientY;

                // 获取原图窗口距离文档的偏移位置

                var sX=$('.orig').offset().left;

                var sY=$('.orig').offset().top;

                // 计算鼠标的相对位置（相对于原图窗口的偏移距离）

                var mx=x-sX;

                var my=y-sY;

                // 获取小框框的宽高

                var mw=$('.blocks').width()/2;

                var mh=$('.blocks').height()/2;

                // 鼠标移动后小框框的移动距离

                $('.blocks').css({left:mx-mw+'px',top:my-mh+'px'});

                // 获取小框框的偏移位置

                    var lw=$('.blocks').position().left;

                    var lh=$('.blocks').position().top;

                // 判断边界（小框框只能在原图窗口范围内移动）

                    var maxW=$('.orig').width()-$('.blocks').width()

                    var maxH=$('.orig').height()-$('.blocks').height()

                    // 左边界

                    if(lw<=0){$('.blocks').css('left','0px');}

                    // 右边界

                    if(lw>=maxW){

                        $('.blocks').css('left',maxW+'px');

                    }

                    // 上边界

                    if(lh<=0){$('.blocks').css('top','0px');}

                    // 下边界

                    if(lh>=maxH){

                        $('.blocks').css('top',maxH+'px');

                    }

                    // 获取小框框的偏移位置

                    var lw=$('.blocks').position().left;

                    var lh=$('.blocks').position().top;

                // 计算鼠标在小图里的位置  *2.5计算大图移动的比例

                    var newX=lw*2.5;

                    var newY=lh*2.5;

                $('.fd img').css({left:-newX+'px',top:-newY+'px'});

        })

        //绑定鼠标离开原图窗口事件

        $('.orig').mouseout(function(){

                $('.fd').css('display','none');

                $('.blocks').css('display','none');

        })

    </script>

</body>

</html>

　　

jQuery实现网页放大镜功能 转载的更多相关文章

  1. jQuery实现网页放大镜功能

    京东等电商网站中可以对商品进行放大观察,本文要实现的就是模仿这个放大镜功能,大致效果如下图所示: 简要说明实现思路: 1.原图窗口与放大窗口插入的是同一个图片,不过原图窗口的图片要适当缩小,放大窗口图 ...

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

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

  3. 8款极具表现力的jQuery/CSS3网页菜单

    上一篇我向大家分享了7款效果震憾的HTML5应用组件,今天主要来分享一下CSS3网页菜单,因为在一个网站中,菜单起着举足轻重的作用,所以作为WEB开发人员,我们有必要将网站的菜单设计得尽量完美,下面向 ...

  4. 11款样式新颖的 jQuery/CSS3 网页菜单

    今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...

  5. nodeJS实现简单网页爬虫功能

    前面的话 本文将使用nodeJS实现一个简单的网页爬虫功能 网页源码 使用http.get()方法获取网页源码,以hao123网站的头条页面为例 http://tuijian.hao123.com/h ...

  6. jQuery Ajax 全解析（转载）

    本文地址: jQuery Ajax 全解析 本文作者:QLeelulu 转载请标明出处! jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写Java ...

  7. JQuery制作网页——第五章 初识 jQuery

    1.jQuery简介: ● jQuery由美国人John Resig于2006年创建 ● jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装 ● 它的设计 ...

  8. [COCOS2DX-LUA]0-001.利用ClippingNode实现放大镜功能

    用过Iphone的都知道,Iphone在定位光标位置的时候会把内容进行放大,这样我们就能很快的把光标移动到指定的位置.那么在我们的Cocos2dX的游戏中,怎么可以实现这种功能呢.起先我就是想起了Ip ...

  9. Jquery对网页高度、宽度的操作

    Jquery获取网页的宽度.高度 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: doc ...

随机推荐

  1. bzoj4007 & loj2111 [JLOI2015]战争调度 复杂度分析+树上背包

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4007 https://loj.ac/problem/2111 题解 同 [NOI2006]网络 ...

  2. 为什么我们从Angular 2迁移到Vue.js（为什么我们没有选择React）

    在Rever(www.reverscore.com),我们刚刚使用Vue.js发布了我们的Web客户端的新版本.经过641次提交和16周的紧张开发,我们非常自豪之前做出的决定.8个月前,我们的前端在使 ...

  3. JDK1.8新特性之Stream类初识

    JDK1.8新特性之Stream类初识 import java.util.Arrays; import java.util.List; import java.util.Optional; impor ...

  4. tmux使用——2019年11月20日16:40:15

    1.tmux 命令行的典型使用方式是,打开一个终端窗口(terminal window,以下简称"窗口"),在里面输入命令.用户与计算机的这种临时的交互,称为一次"会话& ...

  5. toj 4061 矩阵攻击(最大独立集)

    题目: 给定一个01 矩阵,其中你可以在0的位置放置攻击装置.每一个攻击装置 (x,y) 都可以按照“日”字攻击其周围八个位置(x−1,y−2),(x−2,y−1),(x+1,y−2),(x+2,y− ...

  6. Mac OS 10.15系统入门教程 系统语言输入法详解

    对于一些Mac新手来说呢还不知道偏好设置到底是什么?有什么用处?其实Mac系统内的几乎所有的系统相关的设置都会在系统偏好设置内出现. 切换系统语⾔在语言与地区设置中拖拽左侧的语言条目就可以切换系统的语 ...

  7. 【leetcode】433. Minimum Genetic Mutation

    题目如下: 解题思路:我的思路很简单,就是利用BFS方法搜索,找到最小值. 代码如下: class Solution(object): def canMutation(self, w, d, c, q ...

  8. 【Linux】批量结束某一脚本的进程

    ps -ef | grep **.sh |grep -v grep | awk '{print $2}' | xargs kill -9

  9. [CSP-S模拟测试]:画作（BFS+数学）

    题目描述 小$G$的喜欢作画,尤其喜欢仅使用黑白两色作画.画作可以抽象成一个$r\times c$大小的$01$矩阵.现在小$G$构思好了了他的画作,准备动笔开始作画.初始时画布是全白的,他每一次下笔 ...

  10. 使用nsenter进入docker容器后端报错 mesg: ttyname failed: No such file or directory

    通过nsenter 进入到docker容器的后端总是报下面的错,, [root@devdtt ~]# docker inspect -f {{.State.Pid}} mynginx411950 [r ...