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. 以太网MAC地址组成与交换机基本知识

    以太网MAC地址 MAC地址由48位二进制组成,通常分为六段,用十六进制表示,工作在数据链路层. 数据链路层功能: 链路的建立,维护与拆除 帧包装,帧传输,帧同步 帧的差错恢复 简单的流量控制 第八位 ...

  2. MySQL架构及优化原理

    1 MySQL架构原理 1.1 MySQL架构原理参看下述链接: https://blog.csdn.net/hguisu/article/details/7106342 1.2 MySQL优化详解参 ...

  3. 前端基础js（四）

    一. js [1] html:用于显示页面 [2] css:用于描述页面的样式 [3] javaScript:用于描述页面的行为 二.js中三大部分内容 [1] 基本语法:函数.对象.事件类型(变量, ...

  4. 第一篇 -- Jmeter的安装下载

    参考链接:https://blog.csdn.net/wust_lh/article/details/86095924 本篇介绍的是在Windows下安装Jmeter. 一.下载Jmeter 官网下载 ...

  5. 如何反编译Python写的exe到py

    参考链接: https://blog.csdn.net/qq_44198436/article/details/97314626?depth_1-utm_source=distribute.pc_re ...

  6. 右键发送 (sendto)，创建快捷方式到自定义的位置，不仅仅是复制，就像 发送到 桌面快捷方式 一样

    TL;DR 在 SendTo 文件夹里加上一文件夹的快捷方式后,在右键发送到这个文件夹的是这些文件的一个副本,实际上是一个复制的过程,有时候我们只希望是快捷方式,那就得另想办法了. 方案如下: 创建一 ...

  7. C#曲线分析平台的制作（五，Sqldependency+Signalr+windows 服务 学习资料总结）

    在前篇博客中,利用interval()函数,进行ajax轮询初步的实现的对数据的实时显示.但是在工业级别实时显示中,这并非是一种最好的解决方案.随着Html5 websocket的发展,这种全双工的通 ...

  8. @FeignClient常用属性

    @FeignClient(name = "gateway-test", value = "gateway-test", url = "localhos ...

  9. QT从入门到入土（四）——多线程(QtConcurrent::run())

    引言 在前面对Qt多线程(QThread)做了详细的分析:QT从入门到入土(四)--多线程(QThread) - 唯有自己强大 - 博客园 (cnblogs.com) 但是最近在做项目时候,要将一个函 ...

  10. SpringBoot数据访问之整合Mybatis配置文件

    环境搭建以及前置知识回顾 SpringBoot中有两种start的形式: 官方:spring-boot-starter-* 第三方:*-spring-boot-starter Mybatis属于第三方 ...