1、鼠标放大镜效果
鼠标放大镜效果，将鼠标移入到左图片，则可以在其右边看到放大的图片，且鼠标移动滑块的大小即为右图显示图片。实际效果如下图所示：
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      #little_image {
        width: 400px;
        height: 400px;
        position: absolute;
        top: 0px;
        left: 0px;
      }
      #image {
        display: block;
        width: 400px;
        height: 400px;
        position: absolute;
      }
      #big_image {
        width: 500px;
        height: 500px;
        border: 1px solid grey;
        overflow: hidden;
        display: none;
        position: absolute;
        top: 0px;
        left: 400px;
      }
      #images {
        display: block;
        width: 1000px;
        height: 1000px;
        position: absolute;
      }
      #slider_block {
        width: 200px;
        height: 200px;
        position: absolute;
       
        border: 1px solid lightgrey;
        cursor: all-scroll;
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="little_image">
      <img src="img/1.png" alt="" id="image"/>
      <div id="slider_block">
      </div>
    </div>
    <div id="big_image">
      <img src="img/31.png" alt="" id="images"/>
    </div>
  </body>
  <script type="text/javascript">
    var littleImage = document.getElementById('little_image');
    var bigImage = document.getElementById('big_image');
    var sliderBlock = document.getElementById('slider_block');
    //为littleImage添加鼠标移入事件
    littleImage.onmousemove = function(event) {
      event = event || window.event;
      sliderBlock.style.display = "block"; //移入鼠标显示sliderBlock
      bigImage.style.display = "inline-block";    //移入鼠标显示bigImage
 
      // 1、限定sliderBlock的活动范围
      var disX = event.clientX - sliderBlock.offsetWidth / 2;      //鼠标点击位置－移动块宽度的1/2
      var disY = event.clientY - sliderBlock.offsetHeight / 2;
     //最大移动位置就是little_image的宽度－移动块的宽度
      var distenceMaxX = littleImage.offsetWidth - sliderBlock.offsetWidth; 
      var distenceMaxY = littleImage.offsetHeight - sliderBlock.offsetHeight;
      if (disX < 0) {
        disX = 0;
      } else if (disX >= distenceMaxX) {
        disX = distenceMaxX
      }
      if (disY < 0) {
        disY = 0;
      } else if (disY >= distenceMaxY) {
        disY = distenceMaxY;
      }
      // 2、通过改变sliderBlock的left和top的指来让sliderBlock随着鼠标移动
      sliderBlock.style.left = disX + "px";
      sliderBlock.style.top = disY + "px";
      // 3、通过计算sliderblock在littleImage的比例，计算bigImage在大图中显示的比例
      var scaleX = disX / distenceMaxX;  
      var scaleY = disY / distenceMaxY;
      var images = document.getElementById('images');
      bigImage.scrollLeft = (images.offsetWidth - bigImage.offsetWidth) * scaleX;
      bigImage.scrollTop = (images.offsetHeight - bigImage.offsetHeight) * scaleY;
    }
     //添加鼠标移出事件
    littleImage.onmouseleave = function() {
      sliderBlock.style.display = 'none';   //  sliderBlock隐藏
      bigImage.style.display = 'none';      //  bigImage隐藏
    }
  </script>
</html>
 
附：offset ｜ client ｜ scroll 关系图

javascript html 鼠标放大镜效果的更多相关文章

  1. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  2. javascript案例之放大镜效果

    效果图 如何实现该效果呢??   我们先来进行分析 实现思路 1.鼠标移入移出事件 1>移入:悬浮块和大图显示 2>移出:悬浮块和大图隐藏 2.鼠标移动(悬浮块随着鼠标移动) 1>获 ...

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

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

  4. JavaScript之放大镜效果2

    在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...

  5. JavaScript之放大镜效果

    在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...

  6. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

  7. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  8. JavaScript仿淘宝实现放大镜效果的实例

    我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...

  9. js 拖拽 鼠标事件，放大镜效果

    设置网站播放视频 只有一个是播放的 //需要引入jquery var v = $("video") v.bind("play",function(){ for( ...

随机推荐

  1. GitHub 多人协作开发 三种方式（转）

    一.Fork 方式 网上介绍比较多的方式(比较大型的开源项目,比如cocos2d-x) 开发者 fork 自己生成一个独立的分支,跟主分支完全独立,pull代码后,项目维护者可根据代码质量决定是否me ...

  2. 实验4 RDD编程初级实践

    1．spark-shell交互式编程 (1) 该系总共有多少学生 scala> val lines = sc.textFile("file:///usr/local/spark/spa ...

  3. PyVista：一款Python的三维可视化软件

    技术背景 三维可视化是一项在工业领域中非常重要的技术,而Python中最热门的可视化工具matplotlib和plotly,更加倾向于在数据领域的可视化,用于展现数据的结果.类似的还有百度的pyech ...

  4. 全面了解Nginx到底能做什么

    最近做项目需要动静分离,便用nginx的反向代理来实现.后来看到一篇好文,记录下. 来自https://www.jianshu.com/p/8bf73d1a758c 前言 本文只针对Nginx在不加载 ...

  5. 微信小程序云开发-云函数-数据库和云函数获取数据的区别

    一.数据库获取数据 1.1 数据库获取数据的写法 在本地创建的页面js文件中写代码 1.2 数据库获取数据返回数据限制20条 数据库获取数据,每次返回20条数据(数据库有108条数据) 1.3 数据库 ...

  6. Java 批量删除Word中的空白段落

    1. 测试文档.期望达到的目标文档效果 用于测试的Word文档如下所示,包含的空白段落影响文章整体布局及美观性: 目标文档效果: 2. 辅助工具 2.1 使用类库:Free Spire.Doc for ...

  7. hash表/哈希表

    https://blog.csdn.net/duan19920101/article/details/51579136 简单理解就是一个通过映射直接查找的表(散列表),用哈希函数将数据按照其存储特点进 ...

  8. odoo中接口开发

    文章参考:https://blog.csdn.net/qq_33472765/article/details/81913627案例0000001接口调用请求说明:https请求方式:GET(请使用ht ...

  9. Vue--之调试

    vue.文件的调试 方法:在chrome浏览器中,F12,在Sources中ctrl+F 查找leftMenu.vue, 打断点,F8完成加载

  10. vue 使用 lang="scss" 报错

    npm install sass-loader@7.3.1 --save-dev npm install node-sass --save npm install style-loader --sav ...