案例：高清放大镜

分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. 基础回顾: 关于Session的一些细节

    1 session是服务端技术, cookie是客户端技术 2 默认情况下, 一个浏览器独占一个session对象, 也就是说, 开启两个浏览器进程, 它们之间使用的session不是同一个sessi ...

  2. com.rabbitmq.client.ShutdownSignalException: channel error; protocol method: #method<channel.close>(reply-code=404, reply-text=NOT_FOUND - no queue 'springCloudBus.anonymous.6Xa99MDZTJyHKdPqMyoVEA' in

    项目启动报此异常,解决方式:用root权限登陆rabbitmq,admin处添加vhost

  3. DataLossError (see above for traceback): file is too short to be an sstable [[Node: save/RestoreV2 = RestoreV2[dtypes=[DT_FLOAT, DT_FLOAT, DT_FLOAT, DT_FLOAT, DT_FLOAT, ..., DT_FLOAT, DT_FLOAT, DT_F

    DataLossError (see above for traceback): file is too short to be an sstable [[Node: save/RestoreV2 = ...

  4. 不同版本springboot端点开启方法

    1.X版本与2.X区别:2.X大部分路径要加“/actuator” 端点列表(注意最后一栏Sensitive为true的端点如果不设置为false将不可访问): https://docs.spring ...

  5. HBase的安装与配置

  6. python内置类型详细解释

    文章编写借鉴于内置类型 - Python 3.7.3 文档,主要用于自己学习和记录 python主要内置类型包括数字.序列.映射.类.实例和异常 有些多项集类是可变的.它们用于添加.移除或重排其成员的 ...

  7. xlwt/xlwt/Style.py excel样式源文件

    from __future__ import print_function # -*- coding: windows-1252 -*- from . import Formatting from . ...

  8. JZOJ5857 【NOIP提高组模拟A组2018.9.8】没有上司的舞会

    题目 Description "那么真的有果尔德施坦因这样一个人?"他问道. "是啊,有这样一个人,他还活着.至于在哪里,我就不知道了." "那么那个 ...

  9. Python-可变类型与不可变类型

    可变类型 可以变化的,列表和字典 利用id()函数 查看内存地址 内存地址变化即不可变类型. 内存地址不变化即可变类型 不可变类型 不可以变化的,字符串和数字 字符串内置方法 索引取值 索引切片 成员 ...

  10. NMS 和 Soft-NMS

    转自https://zhuanlan.zhihu.com/p/42018282 一 NMS NMS算法的大致思想:对于有重叠的候选框:若大于规定阈值(某一提前设定的置信度)则删除,低于阈值的保留.对于 ...