案例：高清放大镜

分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. CSS - 选择器相关

    1. 标签选择器 /* 标签选择器 : 会将样式作用在当前网页所有的指定标签上 标签名 { 样式名1: 样式值1; 样式名2: 样式值2; ...... } */ table { width: 300 ...

  2. VS2010版的Speex音频处理模块(附源码+测试demo)

    开源的Speex代码内部包含了VS2003,05,08工程,但是直接编译总有一些要设置的地方,虽说也不是很复杂,但是对于不是很了解VS的同学来说还是要折腾一阵,所以我弄了一个可以直接使用的版本,当然是 ...

  3. LUOGU P2831 愤怒的小鸟 （NOIP 2016）

    题面 题解 好像昨天wxl大爷讲的是O(Tn*2^n)的做法,后来没想通,就自己写了个O(Tn^2*2^n)的暴力状压, 莫名其妙过了??数量级二十亿??懵逼,可能到了CCF老爷机上就T了.dp[S] ...

  4. Java-JPA：JPA

    ylbtech-Java-JPA:JPA JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对 ...

  5. Acer电脑【no bootable device】引导修复

    时隔一年,又遇上了我的电脑出现     No Bootable Device    的开机提示,进不了系统. 那么怎么办呢? // 本文修复方式仅针对宏碁电脑且分区表为MBR的情况.按如下方法引导并未 ...

  6. sed应用 升级场景配置文件更新 指定行追加

    function addLine() { confFile=configuration.xml isExist=`cat ${confFile} | grep "<listen_ena ...

  7. 04_Hibernate检索方式

    一．Hibernate检索方式概述 OID检索方式:按照对象的OID来检索对象(get/load) HQL检索方式:使用面向对象的HQL查询语言 QBC检索方式:使用QBC(Query By Crit ...

  8. <每日一题>题目21：简单的python练习题(21-30)

    #21.cookie和session的区别 ''' 1.cookie数据存放在客户的浏览器上,session数据存放在服务器上 2.cookie不是很安全,可以通过分析本地cookie组成伪造cook ...

  9. boost 日期时间计算

    示例代码如下: #include <boost/date_time/gregorian/gregorian.hpp> #include <boost/date_time/posix_ ...

  10. 如何解决mysql服务器load高

    .登录主机 # ssh hostname .确定是否是mysql导致 # top .查看是哪些sql正在慢查询 # mysql -h hostname -P port -u username # sh ...