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

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

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. SSM搭建

    SSM搭建 SSM(Spring+SpringMVC+MyBatis)框架集由Spring.SpringMVC.MyBatis三个开源框架整合而成,常作为数据源较简单的web项目的框架.. Sprin ...

  2. （JAVA作业）练习：创建一个类名为Fruit;包含实例变量：水果名称，颜色，价格，上市月份，有无种子 10个实例：苹果，香蕉，芭乐，柚子，李子，杨桃，猕猴桃，哈密瓜，葡萄，榴莲； 实现功能：提示用户输入水果品种编号，输出该水果的全部信息。

    class Lei { String name; String color; int price; int date; int num; String zz; void assemble(){ Sys ...

  3. 南昌网络赛 I. Max answer　（单调栈 + 线段树）

    https://nanti.jisuanke.com/t/38228 题意给你一个序列,对于每个连续子区间,有一个价值,等与这个区间和×区间最小值,求所有子区间的最大价值是多少. 分析:我们先用单调栈 ...

  4. vue-cli3 chainWebpack配置，去除打包后文件的预加载prefetch/preload(已解决)

    //细节配置修改 chainWebpack: config => { console.log(config,'chainWebpack') // 移除 prefetch 插件 config.pl ...

  5. MONO MessageBox 类

    MessageBox类,负责提示各种消息.   using System; using Android.App; using Android.Content; namespace Box { publ ...

  6. [Xamarin.Android]使用SqliteNET (转帖)

    Xamarin除了提供ADO.NET方式操作Sqlite外, 也提供了一個類似Entity Framework的SqliteNET, 可至官網提供的連結下載Source, 或點選這裡下載. 以下範例使 ...

  7. (转)linux运维必会MySQL企业面试题

    linux运维必会MySQL企业面试题  老男孩教育运维班全体学员MySQL必会企业面试题最实战.最细致.最落地的运维实训基地,老男孩教育连续多年国内平均就业工资最高! 数据库的重要性是所有技术里最核 ...

  8. 窗口大小调整后处理事件jQuery插件ResizeEnd

    需要引入的文件: <script src="js/jquery.min.js"></script> <script src="js/jQue ...

  9. 自定义 checkbox 样式

    前言:最近在做一个网站,为了统一风格,需要自定义checkbox的样式.所以花了点时间参考了 研究了一下.感觉上面的方法略微麻烦.所以自己重新写了下面的代码,欢迎大家指教.同时,感谢w3cplus提供 ...

  10. web端网页适配移动端注意事项，以及遇到的问题

    1.一定要加上 <!-- name=“viewport” 指视口 width=device-width 宽度等于视口宽 initial-scale=1.0 像素比例 maximum-scale= ...