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

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

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. php脚本cli 模式运行

    参考文章 http://rapheal.sinaapp.com/2013/11/20/php_zend_hello_world/ http://www.douban.com/note/33788568 ...

  2. 人工鱼群算法超详细解析附带JAVA代码

    01 前言 本着学习的心态,还是想把这个算法写一写,给大家科普一下的吧. 02 人工鱼群算法 2.1 定义 人工鱼群算法为山东大学副教授李晓磊2002年从鱼找寻食物的现象中表现的种种移动寻觅特点中得到 ...

  3. 简单创建一个完整的struts2框架小程序

    要完成一个struts2框架的搭建, 1.首先应该从官网上下载最新的jar包,网络连接:http://struts.apache.org/download.cgi#struts2514.1,选择下载F ...

  4. Win10将用户名修改为英文

    前言 最近重装了一次Win10系统,手贱地在引导里设置了中文的用户名.使用微软账户进行登录后,Win10以这个中文名建立了用户的文件夹,使得少数软件安装或使用过程中,保存路径不支持中文路径,从而报错, ...

  5. 编程开发之--java多线程学习总结（2）同步代码块

    1.第一种解决办法:同步代码块,关键字synchronized package com.lfy.ThreadsSynchronize; /** * 1.使用同步代码块 * 语法: synchroniz ...

  6. 钩子编程（HOOK） 屏蔽全部按键、鼠标及系统功能键 (4)

    摘要:上篇文章<钩子编程(HOOK) 安装系统全局钩子>已经具体的解说了全局钩子的安装.本文将增强一下钩子的功能.实现屏蔽全部按键鼠标与系统功能键.要实现这个功能.须要安装两个全局钩子,& ...

  7. FJWC2019 全连

    题目描述 有n个音符,第i个音符会在第i个时刻来临 令第 i 个音符的准备时间为 ti​ 个单位时间,如果选择去点击第 i 个音符,那么就没法点击所有到来时刻在 (i−ti​ ,i+ti​)中的音符. ...

  8. wireshark 抓包

    Wireshark(前称Ethereal)是一个网络数据包分析软件.网络数据包分析软件的功能是截取网络数据包,并尽可能显示出最为详细的网络数据包数据.Wireshark使用WinPCAP作为接口,直接 ...

  9. CSS外边距合并&块格式上下文

    前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为 ...

  10. Android OpenGL教程-第六课【转】

    第六课 纹理映射: 在这一课里,我将教会你如何把纹理映射到立方体的六个面. 激动的时刻来了,加载图片了. 复习一下android加载图片的知识.放一个png到drawable里面. (图片文件名:ne ...