案例：高清放大镜

分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. android-启动另外一个Activity

    启动另外一个Activity 在完成了上一节课的学习后,我们已经创建了一个带有text输入框和一个button的app. 在本课中,我们将在MainActivity类中添加SendButton的单击响 ...

  2. C++ 系列：static

    C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的static.前者应用于普通变量和函数,不涉及类:后者主要说明static在类中的作用.一.面向过程设计中的sta ...

  3. 用shell编写小九九乘法表程序

    1.使用for循环 运行结果: 2.方法二:for循环 运行结果: 备注: 1. echo -n 的意思是不自动换行,因为在linux shell中 echo到最后一个字符时会自动换行的,所以echo ...

  4. postgresql计算2个日期之间工作日天数的方法

    select date_part( 'day', minus_weekend(begin_date,end_date)) from table1 where name in ('a', 'b', 'c ...

  5. Vim操作 -- 按列

    1, 拷贝行 Y y 拷贝当前光标字符 如果需要拷贝整个单词,可以用 ye,e表示跳到词尾 2, 粘贴 P(大写) 粘贴到光标前 p(小写)粘贴到光标后 3, 进入快操作模式 ctrl+q 4, 用 ...

  6. 使用应用程序(Java/Python)访问MaxCompute Lightning进行数据开发

    MaxCompute Lightning是MaxCompute产品的交互式查询服务,支持以PostgreSQL协议及语法连接访问Maxcompute项目,让您使用熟悉的工具以标准 SQL查询分析Max ...

  7. 如何在window和mac下查找数据库

    1. mac 下终端使用步骤 cd /Applications/xampp/bin ./mysql -u root 2. window CMD命令中执行步骤 D: cd  D:/xampp/mysql ...

  8. memcache课程---2、php如何操作memcache

    memcache课程---2.php如何操作memcache 一.总结 一句话总结: windows下装好memcache.exe,装好memcache的php扩展之后,然后使用memcache函数库 ...

  9. iOS开发自定义转场动画

    1.转场动画 iOS7之后开发者可以自定义界面切换的转场动画,就是在模态弹出(present.dismiss),Navigation的(push.pop),TabBar的系统切换效果之外自定义切换动画 ...

  10. NYOJ--311（完全背包）

    题目:http://acm.nyist.net/JudgeOnline/problem.php?pid=311 分析:这里就是一个完全背包,需要注意的就是初始化和最后的输出情况        dp[j ...