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. 重置networker9.0密码

    一.重置Networker 9.0密码 下面所有步骤在Networker服务器上操作 1.创建"mypassword_in.txt"文件 在服务器C盘根目录下创建一个 " ...

  2. 《快来为你的 .NET 应用加个监控吧！》更新版本啦

    目录 导读 三种方式处理监控数据 主动推送 ASP.NET Core 自定义URL .NET diagnostics 自定义监控指标 导读 CZGL.ProcessMetrics 是一个 Metric ...

  3. CF1539D PriceFixed[题解]

    PriceFixed 题目大意 市场上又 \(n\) 种商品,每种商品的价格都是 \(2\) .对于第 \(i\) 种商品 \(a_i\) 件.对于商品 \(i\) 给出一个值 \(b_i\) ,如果 ...

  4. c语言：逗号运算符

    #include <stdio.h> main() { int a,s,d; s=2,d=3; a=12+(s+2,d+4); printf("%d\n",a); in ...

  5. [刘阳Java]_了解BeanFactory_第4讲

    为什么说我们这篇文章只是说了解一下BeanFactory.因为BeanFactory内在的机制与代码实现实在是太强大了,在这一点我确实不敢滥竽充数. 1. 那么我们又如何去了解BeanFactory, ...

  6. VS Code 与 ESP32 官方SDK配置

    开发基于 ESP XXX 微控制器应用,最简单的环境搭建方案是像 MicroPython.CircuitPython.NanoFramework 等,下载固件,直接开刷:或者基于 Arduino 的开 ...

  7. PAT乙级：1084 外观数列 (20分)

    PAT乙级:1084 外观数列 (20分) 题干 外观数列是指具有以下特点的整数序列: d, d1, d111, d113, d11231, d112213111, ... 它从不等于 1 的数字 d ...

  8. 浅谈树模型与集成学习-从决策树到GBDT

    引言   神经网络模型,特别是深度神经网络模型,自AlexNet在Imagenet Challenge 2012上的一鸣惊人,无疑是Machine Learning Research上最靓的仔,各种进 ...

  9. 微信小程序 -- scroll view

    效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...

  10. css--实现一个文字少时居中，文字换行时居左的样式

    前言 最近群里的小伙伴去面试,遇到这样一个问题,面试官问:"用 css 对一行文字进行布局,当文字不够换行的时候,这行文字要居中显示,当文字出现换行的时候,这行文字要靠左显示.", ...