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

简要说明实现思路：

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. HTML5 canvas绘制文本

    demo.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset=" ...

  2. hive之调优

    1.简单的查询,就是只是select,不带count,sum,group by这样的,都不走map/reduce,直接读取hdfs文件进行filter过滤,即尽量让fetch task(当开启一个Fe ...

  3. centos 6.5 配置阿里云 yum 镜像

    配置国内镜像目的是为了加速软件下载安装速度,参考链接:http://mirrors.aliyun.com/help/centos 备份.养成文件操作前备份的习惯 cd /etc/yum.repos.d ...

  4. sql 中 exists用法

    SQL中EXISTS的用法   比如在Northwind数据库中有一个查询为SELECT c.CustomerId,CompanyName FROM Customers cWHERE EXISTS(S ...

  5. Spring Transaction Isolation

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11530702.html Reference http://docs.spring.io/spring/ ...

  6. 【leetcode】699. Falling Squares

    题目如下: On an infinite number line (x-axis), we drop given squares in the order they are given. The i- ...

  7. POJ 3525 Most Distant Point from the Sea (半平面交)

    Description The main land of Japan called Honshu is an island surrounded by the sea. In such an isla ...

  8. Python基础教程（022）--Pycharm快速体验

    前言 熟悉掌握Python工具 内容 提示 断点调试 目的 学会了解Pycharm的使用 掌握Pycharm执行程序 掌握断点调试模式

  9. AT2705 Yes or No(组合数学)

    传送门 解题思路 首先将这个模型放到坐标轴上,\(x\)轴表示\(1\),\(y\)轴表示\(0\).问题就转化成了从\((0,0)\)走到\((n,m)\),每次可以猜测向\(x\)轴或向\(y\) ...

  10. t时间同步服务设置

    中国国家授时中心的时间服务器IP地址及时间同步方法 大家都知道计算机电脑的时间是由一块电池供电保持的,而且准确度比较差经常出现走时不准的时候.通过互联网络上发布的一些公用网络时间服务器NTPserve ...