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. 记两道最近做的pwn题（ciscn_2019）

    这两题为什么要记录呢,一个是我发现网上很多教程没写清楚(也可能是我太菜了),二是细节点很多,不同的大佬方式不太一样,有很多细节需要注意 ciscn_2019_es_2 这题是栈迁移的题,先上exp 1 ...

  2. ARTS第七周

    补上.瞎忙,看来还是效率的问题. 1.Algorithm:每周至少做一个 leetcode 的算法题2.Review:阅读并点评至少一篇英文技术文章3.Tip:学习至少一个技术技巧4.Share:分享 ...

  3. Pandas高级教程之:window操作

    目录 简介 滚动窗口 Center window Weighted window 加权窗口 扩展窗口 指数加权窗口 简介 在数据统计中,经常需要进行一些范围操作,这些范围我们可以称之为一个window ...

  4. python 10篇 操作mysql

    一.操作数据库 使用pip install pymysql,安装pymysql模块,使用此模块连接MySQL数据库并操作数据库. import pymysql host = 'ip地址' # 链接的主 ...

  5. EXCEL:关键字有重复，其他信息一行多列显示

    =INDEX(A:A,SMALL(IF(MATCH($A$2:$A$13,$A$2:$A$13,0)=ROW($A$2:$A$13)-1,ROW($2:$13),4^8),ROW(1:1)))& ...

  6. Emoji.voto，Linkerd 服务网格(service mesh)的示例应用程序

    一个微服务应用程序,允许用户为他们最喜欢的表情符号(emoji)投票,并跟踪排行榜上收到的投票.愿最好的 emoji 获胜. 该应用程序由以下 3 个服务组成: emojivoto-web:Web 前 ...

  7. 框架学习系列 mybatis mapper映射文件之输出映射

    1: mapper映射文件输出映射(输入类型) 2:resultType的使用 3:resultMap的使用 3:总结&下节预告 本文是<凯哥陪你学系列-框架学习之mybatis框架学习 ...

  8. [刘阳Java]_MyBatis_注解基本用法_第10讲

    MyBatis注解提出,可以说是非常好简化了MyBatis配置文件的使用.下面我们简单地来告诉大家如何使用MyBatis的注解 定义接口 package com.gxa.dao; import jav ...

  9. dart pub上传失败如何解决

    问题: Flutter Exception: Pub will wait for a while before trying to connect again. 解决 1.设置终端代理 export ...

  10. 【LeetCode】面试题62. 圆圈中最后剩下的数字

    题目:面试题62. 圆圈中最后剩下的数字 这题很有意思,也很巧妙,故记录下来. 官方题解思路,是约瑟夫环的数学解法: 我们将上述问题建模为函数 f(n, m),该函数的返回值为最终留下的元素的序号. ...