将一个小图放置在一个小盒子里，当鼠标在小盒子里移动时，出现一个移动块，右侧出现一个大盒子，显示出小盒子中移动块所在区域的等比例放大的图片内容。需要实现的效果如下：

基本实现思路为：右侧大盒子为一个可视区域，有左侧小盒子中的图片的等比例放大图片，通过计算图片需要移动的距离来显示出想要放大的内容，超出部分设置为隐藏。

HTML和CSS内容如下：

<head>

    <meta charset="UTF-8">

    <title>放大镜</title>

    <style type="text/css" media="screen">

        img {

      width: 250px;

      height: 150px;

    }

    #pic_wrap {

      position: relative;

      width: 250px;

      height: 150px;

　　　 float: left;

    }

    #float_box {

      width: 100px;

      height: 100px;

      background-color: green;

      filter: opacity(alpha: 30);

      opacity: 0.3;

      position: absolute;

      display: none;

    }

    #big_img {

      background-image: url(images/Layer14.png);

      height: 450px;

      width: 750px;

      background-repeat: no-repeat;

      background-size: cover;

      position: relative;

    }

    #show {

      width: 300px;

      height: 300px;

　　　 float: left;

      background-color: white;

      opacity: 1;

      filter: opacity(alpha:1);

      overflow: hidden;

      display: none;

    }

    </style>

</head>

<body>

    <!-- 原始图片区域 -->

    <div id="pic_wrap">

        <!-- 放大镜所示区域 -->

        <div id="float_box"></div>

        <img src="data:images/Layer14.png" alt="">

    </div>

    <div id="show">

        <!-- 预留的放大后的图片 -->

        <img src="data:images/Layer14.png" id="big_img">

    </div>

</body>

　

HTML和CSS写好之后，利用js给放大镜加交互效果

  1. 　　当鼠标移入的时候，放大镜能够显示出来！需要加onmouseover事件。
  2. 　　当鼠标没有移除，且鼠标在图片内不停地移动， 需要加onmousemove事件。
  3. 　　当鼠标完全移除后，需要加onmouseout事件。
  4. 　　onmouseover事件需要让放大镜和可视窗口显示出来。
  5. 　    onmousemove事件，让放大镜和可视窗口中的图片同时移动。
  6. 　　onmouseout时间，让放大镜和可是窗口消失！

JS代码如下：

var pic_wrap = document.getElementById('pic_wrap'),

    float_box = document.getElementById("float_box"),

    show = document.getElementById('show');

    big_img = document.getElementById("big_img");

  //鼠标移入事件，让放大镜和放大区显示！

  pic_wrap.onmouseover = function() {

    float_box.style.display = "block";

    show.style.display = "block";

  }

  //鼠标不断移动时触发，实时更新放大镜得到的图片

  pic_wrap.onmousemove = function(event) {

    floatMove(float_box, pic_wrap, event);

    showPic();

  }

  //鼠标移出后，放大镜和放大区隐藏

  pic_wrap.onmouseout = function() {

    float_box.style.display = "none";

    show.style.display = "none";

  }

      //由于offset方法包括边框，在使用的时候很容易出现问题，所以用style来实时获取attr！

  function getStyle(obj, attr) {

    if (window.currentStyle) {

      return parseInt(obj.currentStyle[attr]);

    }

    else {

      return parseInt(getComputedStyle(obj,null)[attr]);

    }

  }

  //运动框架，控制放大镜在原图中的位置！

  function floatMove(argu1, argu2, event) {

    var e = event ||window.event;

    var minLeft = getStyle(argu1, "width");

    var maxLeft = getStyle(argu2, "width") - minLeft/2;

    var minHeight = getStyle(argu1, "height");

    var maxHeight = getStyle(argu2, "height") - minHeight/2;

    console.log(maxLeft);

    console.log(maxLeft - minLeft/2);

    if (e.clientX < minLeft/2) {

      float_box.style.left = "0px";//防止放大镜超出左边框

    }

    else if (e.clientX > maxLeft) {

      float_box.style.left = getStyle(argu2, "width") - getStyle(argu1, "width") + "px";//防止放大镜超出右边框

    }

    else {

      float_box.style.left = event.clientX - minLeft/2 + "px"; //放大镜完全在图片内时正常移动

    }

    if (e.clientY < minHeight/2) {

      float_box.style.top = "0px"; //防止放大镜超出上边框

    }

    else if (e.clientY > maxHeight) {

      float_box.style.top = getStyle(argu2, "height") - getStyle(argu1, "height") + "px"; //防止放大镜超出下边框

    }

    else {

      float_box.style.top = event.clientY - minLeft/2 + "px";

    }

  }

  //用来显示放大镜得到的图片，利用坐标计算！实时更新可视区域

  function showPic() {

    var iCurLeft = getStyle(float_box,"left");

    var iCurTop = getStyle(float_box,"top");

    var a = getStyle(pic_wrap,"width") - getStyle(float_box,"width");

    var b = getStyle(big_img,"width") - getStyle(show,"width");

    var moveWidth = -(iCurLeft/a)*b;

    big_img.style.left = moveWidth + "px";

    var c = getStyle(pic_wrap,"height") - getStyle(float_box,"height");

    var d = getStyle(big_img,"height") - getStyle(show,"height");

    var moveHigth = -(iCurTop/c)*d;

    big_img.style.top = moveHigth + "px";

  }

　　

JS实现图片放大镜的更多相关文章

  1. 原生JS实现图片放大镜插件

      前  言 我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的…… 先看一下我们要是实现的最终效果是怎么样的  ...

  2. vue项目js实现图片放大镜功能

    效果图:   我写的是vue的组件形式,方便复用,图片的宽高,缩放的比例可以自己定义 magnifier.vue <template> <div class="magnif ...

  3. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  4. jquery.jqzoom.js图片放大镜

    jqzoom插件实现图片放大镜效果 1. jquery.jqzoom.js //************************************************************ ...

  5. [js开源组件开发]图片放大镜

    图片放大镜 一般情况下,手机由于屏幕太小,会有图片上看不清的问题,所以我就做了一个放大镜的js效果,支持pc和移动端.它的原理是利用的backgroundsize来实现的,所以你的浏览器首先要支持这个 ...

  6. JS 图片放大镜

    今天练习一个小demo, 从本地读取图片, 然后实现类似淘宝放大镜的效果, 再加两个需求 1 .可以调节缩放比例,默认放大两倍 2 . 图片宽高自适应, 不固定宽高 话不多说先看效果: 原理:1, 右 ...

  7. Jquery图片放大镜

    一般在“在线商城.电子商务.企业产品介绍”等地方经常会看到一些图片放大镜的功能,而做这个功能一般是会用一个js包——enlarge.js(这是jquery图片放大镜的插件).Enlarge 是一个基于 ...

  8. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  9. jquery图片放大镜和遮罩层效果

    图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...

随机推荐

  1. 【Qt开发】实现系统托盘，托盘菜单，托盘消息

    概述 系统托盘就是在系统桌面底部特定的区域显示运行的程序.windows在任务栏状态区域,linux在布告栏区域.应用程序系统托盘功能,是比较普遍的功能,本篇将详细的介绍如何实现该功能. 演示Demo ...

  2. Junit 测试exception

    有两种方法: 一.使用ExpectedException 仅在junit4.7以上支持.不仅可以测试捕获到某异常,也可以测试异常message. 使用例子如下: @Rule public Expect ...

  3. 将参数传递给ASP.NET Core 2.0中的中间件

    问题 在ASP.NET Core的安装过程中,如何将参数传递给中间件? 解 在一个空的项目中添加一个POCO类来保存中间件的参数, publicclass GreetingOptions { publ ...

  4. 开源单点登录系统CAS入门

    一.什么是CAS CAS 是 Yale 大学发起的一个开源项目,旨在为 Web 应用系统提供一种可靠的单点登录方法,CAS 在 2004 年 12 月正式成为 JA-SIG 的一个项目.CAS 具有以 ...

  5. Thread.Sleep(1000) 、Task.Delay(1000).Wait() 区别

    public static Task Delay(int millisecondsDelay, CancellationToken cancellationToken){    if (millise ...

  6. jsp页面struts2标签展示clob类型的数据

    直接从数据库中查出来的数据,是clob类型的在前端页面展示的时候是这样: 后来找到了一个方法,在action中添加一个方法,解析转换clob数据的方法 public String getClob(Cl ...

  7. Neo4j安装&入门&一些优缺点(转)

    本篇将介绍Neo4j的安装,入门,和自己使用了一段时间后发现的优点缺点,争取简洁和实用. 如果你是第一次接触Neo4j,并且之前也都没接触过类似的Graph Database的话,建议先浏览一下我之前 ...

  8. 基于MVC4+EF5.0+Ajax+Json+CSS3的简单注册页面（get&post）

    使用mvc4可以很快速的创建页面,但封装的过多,难免会有些性能上的问题.所以基于此,通过使用简单的手写html,加ajax,json来创建一个注册页面,会比较干净,简洁. 本项目的环境是MVC4+EF ...

  9. linux mint 19安装 kvm 软件包

    1 我的处理器是2700x 首先安装cpu检测 sudo apt-get install cpu-checker 2 查看cpu内核 egrep -c '(vmx|svm)' /proc/cpuinf ...

  10. 使用wireshark出现Couldn't run /usr/bin/dumpcap in child process: Permission denied解决办法

    sudo apt-get install libcap2-bin wireshark sudo chgrp myusername /usr/bin/dumpcap # myusername是你使用wi ...