案例：高清放大镜

分3步

1. 鼠标进入和离开，显示和隐藏遮挡层和大图div

2. 鼠标在小层上移动，鼠标横纵坐标，为可视区域坐标-遮挡层的宽高，鼠标移动的时候，在一个区域内移动，需要判断和定义下移动区间

3. 在小图移动，对应大图的坐标，用比例来做 a/b =c/d ，a=bc/d

4. 移动设置，用大图的marginleft和top实现，负的移动距离

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title>哈哈</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    .box {

      width: 350px;

      height: 350px;

      margin: 100px;

      border: 1px solid #ccc;

      position: relative;

    }

    .big {

      width: 400px;

      height: 400px;

      position: absolute;

      top: 0;

      left: 360px;

      border: 1px solid #ccc;

      overflow: hidden;

      display: none;

    }

    .mask {

      width: 175px;

      height: 175px;

      background: rgba(255, 255, 0, 0.4);

      position: absolute;

      top: 0px;

      left: 0px;

      cursor: move;

      display: none;

    }

    .small {

      position: relative;

    }

  </style>

</head>

<body>

  <div class="box" id="box">

    <div class="small">

      <!--小层-->

      <img src="data:images/small.png" width="350" alt="" />

      <div class="mask"></div>

      <!--遮挡层-->

    </div>

    <!--小图-->

    <div class="big">

      <!--大层-->

      <img src="data:images/big.jpg" width="800" alt="" />

      <!--大图-->

    </div>

    <!--大图-->

  </div>

  <!--导入外部的js文件-->

  <script src="common.js"></script>

  <script>

    //获取需要的元素

    var box = my$("box");

    //获取小图的div

    var small = box.children[0];

    //遮挡曾

    var mask = small.children[1];

    //获取大图的div

    var big = box.children[1];

    //获取大图

    var bigImg = big.children[0];

    //鼠标进入显示遮挡层和大图的div

    box.onmouseover = function () {

      mask.style.display = "block";

      big.style.display = "block";

    };

    //鼠标离开隐藏遮挡层和大图的div

    box.onmouseout = function () {

      mask.style.display = "none";

    };

    //鼠标的移动事件---鼠标是在小层上移动

    small.onmousemove = function (e) {

      //鼠标此时的可视区域的横坐标和纵坐标

      //设置鼠标在遮挡层的中间显示

      var x = parseInt(e.clientX - mask.offsetWidth / 2);

      var y = parseInt(e.clientY - mask.offsetHeight / 2);

      //设置margin的100px的问题 （先让鼠标在遮挡层左上角显示）

      x = x - 100;

      y = y - 100;

      //横坐标的最小值

      x = x < 0 ? 0 : x;

      //纵坐标的最小值

      y = y < 0 ? 0 : y;

      //横坐标的最大值

      x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;

      //纵坐标的最大值

      y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;

      //为遮挡层的left和top赋值

      mask.style.left = x + "px";

      mask.style.top = y + "px";

      //遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离

      //大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离

      //大图的横向最大移动距离

      var maxX = bigImg.offsetHeight - big.offsetHeight;

      //大图的纵向最大移动距离

      // var maxY = bigImg.offsetHeight - big.offsetHeight;

      //大图的横向移动坐标

      var bigImgMoveX = x * maxX / (small.offsetWidth - mask.offsetWidth);

      //大图的纵向移动坐标

      var bigImgMoveY = y * maxX / (small.offsetWidth - mask.offsetWidth);

      //设置图片的移动

      bigImg.style.marginLeft = -bigImgMoveX + "px";

      bigImg.style.marginTop = -bigImgMoveY + "px";

    };

  </script>

</body>

</html>

JS---案例：高清放大镜的更多相关文章

  1. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

  2. Node JS爬虫：爬取瀑布流网页高清图

    原文链接:Node JS爬虫:爬取瀑布流网页高清图 静态为主的网页往往用get方法就能获取页面所有内容.动态网页即异步请求数据的网页则需要用浏览器加载完成后再进行抓取.本文介绍了如何连续爬取瀑布流网页 ...

  3. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  4. webapp：移动端高清、多屏适配方案（zz）

    来源: http://sentsin.com/web/1212.html 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉 ...

  5. 解惑好文：移动端H5页面高清多屏适配方案 (转)

    转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...

  6. 移动端高清、多屏适配方案 [来源：http://div.io/topic/1092]

    Lovesueee 发布于 8 月前 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视 ...

  7. [转]:移动端H5页面高清多屏适配方案

    原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...

  8. 解惑好文：移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  9. 移动端，多屏幕尺寸高清屏retina屏适配的解决方案

    移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页 ...

随机推荐

  1. python全栈开发：字符串格式化

    Python的字符串格式化有两种方式: 百分号方式.format方式百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存. 1.百分号方式 %[(name ...

  2. Flask从入门到入土

    一.flask介绍 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对 ...

  3. 解决python中import时无法识别自己写的包和模块的方法

    我们用pycharm打开自己写的代码,当多个文件之间有相互依赖的关系的时候,import无法识别自己写的文件,但是我们写的文件又确实在同一个文件夹中, 这种问题可以用下面的方法解决: 1)打开File ...

  4. SpringBoot 03_利用FastJson返回Json数据

    自上一节:SpringBoot 02_返回json数据,可以返回json数据之后,由于有些人习惯于不同的Json框架,比如fastjson,这里介绍一下如何在SpringBoot中集成fastjson ...

  5. <数据库>MySQL的安装及安装中存在的问题

    无脑三连: 下载:https://dev.mysql.com/downloads/mysql/5.7.html#downloads 解压:任意目录 添加环境变量:WIN10步骤 我的电脑→属性→高级系 ...

  6. C# 读写 Photoshop PSD文件 操作类

    分析了PSD的文件....才发现PSD的RGB色彩保存也是 先红 蓝 绿 这样保存的 ....麻烦的.. 另外8BIM好象没什么用..可以直接跳过..直接获取最后的图形信息就可以了.. 我只对一些PS ...

  7. os一些记录

    X86-32 内存机制 寄存器 段寄存器 指令寄存器 标志寄存器 编程技巧 通用格式双向链表 操作的接口 由一个指针找到宿主节点的方法

  8. Find- Linux必学的60个命令

    1.作用 find命令的作用是在目录中搜索文件,它的使用权限是所有用户. 2.格式 find [path][options][expression] path指定目录路径,系统从这里开始沿着目录树向下 ...

  9. List--使用List作为堆栈和队列

    1,List作为堆栈 堆栈“先进后出”.对此,可以使用append和pop来操作数据. 不指定下标时,pop会先操作最后一个数据. 例如: 2,队列 队列“先进先出”.当然也可以使用append和po ...

  10. 微信回调校验失败兼容php7

    今天在移动微信支付的代码的时候,发现校验失败,之前好好的,一点点打印了,顺着微信校验程序打印看结果,发现  $xml = $GLOBALS['HTTP_RAW_POST_DATA'];; 接收到的数据 ...