案例：高清放大镜

分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. LUOGU P1967 货车运输(最大生成树+树剖+线段树)

    传送门 解题思路 货车所走的路径一定是最大生成树上的路径,所以先跑一个最大生成树,之后就是求一条路径上的最小值,用树剖+线段树,注意图可能不连通.将边权下放到点权上,但x,y路径上的lca的答案不能算 ...

  2. UltraISO刻录CentOS 7安装指南

    CentOS 7.2 安装指南(U盘版) 一.准备阶段 1.下载CentOS7镜像文件(ISO文件)到自己电脑,官网下载路径: http://isoredirect.centos.org/centos ...

  3. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)   Django基础七之 ...

  4. Java 使用JDBC连接MySQL

    //  这学期本来不打算深入学习Java的,课上的小项目也就随便写了一个简单计算器和扫雷游戏就糊弄过去.可是我们的Eliza老师偏偏什么都讲了,考虑到期末也会涉及到JDBC的内容,前些天试着学习一番. ...

  5. STL容器-deque-双端队列

    注明:全部来自转载,供自己学习与复习使用 deque双向开口可进可出的容器 我们知道连续内存的容器不能随意扩充,因为这样容易扩充别人那去 deque却可以,它创造了内存连续的假象. 其实deque由一 ...

  6. 出现 cannot download, $GOPATH not set. For more details see: go help gopath

    执行安装 sudo go get github.com/nsf/gocode 提示: cannot download, $GOPATH not set. For more details see: g ...

  7. 廖雪峰Java11多线程编程-2线程同步-1同步代码块

    1.线程安全问题 多个线程同时运行,线程调度由操作系统决定,程序本身无法决定 如果多个线程同时读写共享变量,就可能出现问题 class AddThread extends Thread{ public ...

  8. LUOGU P3960 列队 (noip2017 day2T3)

    传送门 解题思路 记得当时考试我还是个孩子,啥也不会QAQ.现在回头写,用动态开点的线段树,在每行和最后一列开线段树,然后对于每次询问,把x行y列的删去,然后再把x行m列的元素加入x行这个线段树,然后 ...

  9. 图像复原MATLAB实现

    前言:本篇博客先介绍滤波器滤除噪声,再介绍滤波器复原,侧重于程序的实现. 一:三种常见的噪声 二:空间域滤波 空间域滤波复原是在已知噪声模型的基础上,对噪声的空间域进行滤波.空间域滤波复原方法主要包括 ...

  10. Java面试总结-基础篇2

    1. mvn的dependency-management dependency-management是声明依赖,不实际引入,主要用于在父依赖中统一各依赖的版本,否则,各个子模块在引用同一依赖时,难免会 ...