<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             #smallImg {

                 position: absolute;

                 left: 50px;

                 top: 100px;

             }

             #smallImg, #smallImg img {

                 width: 200px;

                 height: 200px;

             }

             #smallArea {

                  display: none;

                  width: 50px; height: 50px; background: rgba(200, 222,111, 0.3);

                  position: absolute; left: 50px; top: 0;

             }

             #bigArea {

                  display: none; overflow: hidden;

                  width: 300px; height: 300px; background: rgba(200,111,222,0.3);

                  position: absolute; left: 300px; top: 100px;

             }

             #bigImg {

                 width: 800px; height: 800px;

                 position: absolute; left: 0; top: 0;

             }

         </style>

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

         <script>

             $(function(){

                 //等比公式

                 //小图width/大图width == 小区域width/大区域width

                 $("#smallArea").width( $("#smallImg").width() * $("#bigArea").width() / $("#bigImg").width() );

                 $("#smallArea").height( $("#smallImg").height() * $("#bigArea").height() / $("#bigImg").height() );

                 //放大系数

                 var scale = $("#bigImg").width() / $("#smallImg").width();

                 //在小图中移动

                 $("#smallImg").mousemove(function(e){

                     $("#smallArea").show(); //显示小区域

                     $("#bigArea").show(); //显示大区域

                     var x = e.pageX - $("#smallImg").offset().left - $("#smallArea").width()/2;

                     var y = e.pageY - $("#smallImg").offset().top - $("#smallArea").height()/2;

                     //控制不超出左右边界

                     if (x < 0){

                         x = 0;

                     }

                     else if (x > $("#smallImg").width()-$("#smallArea").width()){

                         x = $("#smallImg").width()-$("#smallArea").width();

                     }

                     //控制不超出上下边界

                     if (y < 0){

                         y = 0

                     }

                     else if (y > $("#smallImg").height()-$("#smallArea").height()) {

                         y = $("#smallImg").height()-$("#smallArea").height();

                     }

                     //小区域移动

                     $("#smallArea").css({left:x, top:y});

                     //大图移动

                     $("#bigImg").css({left: -scale*x,top: -scale*y});

                 })

                 //移除小图

                 $("#smallImg").mouseleave(function(){

                     $("#smallArea").hide(); //隐藏小区域

                     $("#bigArea").hide(); //隐藏大区域

                 })

             })

         </script>

     </head>

     <body>

         <div id="smallImg">

             <img src="data:images/星际穿越.jpg" />

             <div id="smallArea"></div>

         </div>

         <div id="bigArea">

             <img id="bigImg" src="data:images/星际穿越.jpg" />

         </div>

     </body>

 </html>

jq-demo-放大镜的更多相关文章

  1. jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换

    1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...

  3. jq demo 简单的图片懒加载效果

    重点:在元素进入可视区域后,把图片元素的 _src 的值,赋值给 src <!DOCTYPE HTML> <html> <head> <meta http-e ...

  4. jq demo 点击弹窗，居中，可滚动，可拖动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jq demo 点击评分组件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jq demo 九宫格抽奖

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  7. jq demo 点击选中元素左右移动

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  8. jq demo—图片翻页展示效果 animate()动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. Magnifier笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. Nanui 教程

    彩票自动投注软件定制-联灬系-\加/Q;2943075966 黑/科/技问/世.详情直接添加咨询.信/誉/文本 最近接到一个项目 是关于构建一套 电脑端会员管理系统    但考虑到个人比较喜欢写Web ...

随机推荐

  1. vue 中引入cryptoJS

    在搞前端开发的时候,页面上有很多的地方是需要用户输入信息的,但是有些信息又很敏感,比如客户的姓名.电话号码.身份证号码.银行卡号及密码等等这些,如果没有进行加密处理,很容易被别人截取到,项目中应用到c ...

  2. FastAdmin 关于列表渲染文字过长导致页面难以管理的问题

    先贴一张图片做个例子 看不清图片的朋友可以右键图片,在<新标签页中打开图片>; 可以看到,由于内容过长,导致后面操作的增删改要拉到最后才能操作. 在我们的FastAdmin中,目前我还没找 ...

  3. ASP.NET MVC 学习笔记之View 和Redriect的区别

    首先先说一下Redriect 和RedirectToAction 两个没什么区别,都是向浏览器发送302 Found相应,再有浏览器向对应的url进行请求 只是参数的意义不同而已 再说Redirect ...

  4. Codeforces 1163F 最短路 + 线段树 （删边最短路）

    题意:给你一张无向图,有若干次操作,每次操作会修改一条边的边权,每次修改后输出1到n的最短路.修改相互独立. 思路:我们先以起点和终点为根,找出最短路径树,现在有两种情况: 1:修改的边不是1到n的最 ...

  5. {"timestamp":"2019-11-12T02:39:28.949+0000","status":415,"error":"Unsupported Media Type","message":"Content type 'text/plain;charset=UTF-8' not supported","path":&quo

    在Jmeter运行http请求时报错: {"timestamp":"2019-11-12T02:39:28.949+0000","status&quo ...

  6. mysql 日期函数大全

    对于每个类型拥有的值范围以及并且指定日期何时间值的有效格式的描述见7.3.6 日期和时间类型. 这里是一个使用日期函数的例子.下面的查询选择了所有记录,其date_col的值是在最后30天以内: my ...

  7. Hadoop(三）YARN

    Yet Another Resources Negotiator 从Hadoop2.0版本开始引入YARN,主要功能: 集群资源管理系统 负责集群的统一管理和调度 与客户端交互,处理客户端请求 一.基 ...

  8. leetcood学习笔记-14*-最长公共前缀

    笔记: python if not   判断是否为None的情况 if not x if x is None if not x is None if x is not None`是最好的写法,清晰,不 ...

  9. RAM SSO功能重磅发布 —— 满足客户使用企业本地账号登录阿里云

    阿里云RAM (Resource Access Management)为客户提供身份与访问控制管理服务.使用RAM,可以轻松创建并管理您的用户(比如雇员.企业开发的应用程序),并控制用户对云资源的访问 ...

  10. iOS 7 认识 TextKit

    本文由 伯乐在线 - 和谐老约翰 翻译自 Max Seelemann.欢迎加入技术翻译小组.转载请参见文章末尾处的要求. iOS7 的发布给开发者的案头带来了很多新工具.其中一个就是 TextKit( ...