<!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. 在egg中配置 sequelize

    如何在eggjs中引入 sequlize 安装 第一步,在项目中安装 egg-sequelize插件和mysql插件 npm install --save egg-sequelize mysql2 第 ...

  2. ionic3 多级联动城市选择插件 ion-multi-picker

    1.效果演示 2.npm安装扩展包依赖  ion-multi-picker 组件 npm install ion-multi-picker --save 3.在app.module.ts中导入插件模块 ...

  3. ios打包，通过Xcode生成ipa文件

    ios打包,通过Xcode生成ipa文件 干货文章 ·2018-03-21 19:03:47 打开ios项目目录,配置证书 将运行设备选择,如下图 选择:Product -> Scheme -& ...

  4. Android消息处理：EventBus、BroadCast和Handler-优缺点比较

    上一篇研究了EventBus的使用方法,但随之而来的一系列问题也是值得思考,EventBus到底给项目带来了什么?它与Android原有的消息处理机制有什么区别和优缺点?项目在什么场景下采用Event ...

  5. 59. jdk1.5新特性之----增强for循环

    /*jdk1.5新特性之----增强for循环:底层是一个迭代器 作用:简化迭代器书写格式 使用范围:实现了Iterable接口的对象或者数组对象 格式:    for(变量类型  变量名 :遍历目标 ...

  6. Shiro学习（12）与Spring集成

    Shiro的组件都是JavaBean/POJO式的组件,所以非常容易使用spring进行组件管理,可以非常方便的从ini配置迁移到Spring进行管理,且支持JavaSE应用及Web应用的集成. 在示 ...

  7. ubuntu 下gcc的编译运行

    一些基本的操作 $gcc test.c //将test.c预处理.汇编.编译并链接形成可执行文件test $gcc test.c -o test //-o用来指定输出文件的文件名 $gcc -E te ...

  8. 30天轻松学习javaweb_修改tomcat的servlet模板

    在MyEclipse目录下搜索com.genuitec.eclipse.wizards 得到搜索结果 com.genuitec.eclipse.wizards_9.0.0.me201108091322 ...

  9. css布局方面小结

    1 ####css选择器 1 .left-word.moreinfor{} 这样是找不到选择器的.中间需要一个空格 但是div.moreinfor 是可以的. 2 max-width的作用: p元素只 ...

  10. java.io.IOException: Could not find resource SqlMapConfig.xml

    java.io.IOException: Could not find resource SqlMapConfig.xml 创建mybatis工程时遇到的问题 问题的来源:当我们在项目中和src同级的 ...