今天在观看视频学习的时候，学到了一个小技巧。就拿过来与大家进行分享一下啦。

实现的原理

  • 分析需求：需要两张图，一大一小。然后根据鼠标的动作显示出不同的区域块的图像。
  • 核心：鼠标事件的获取和处理。图片显示的时候的放大比例的处理。

编码实现

  • 大结构是如下：

    外边套一个最大的区域块，然后再里面添加不同的显示。
  1. <body>
  2. <div id="demo">
  3. <!--小图片显示区域-->
  4.     <div id="small-box">
  5.     <!--mark表示小图片的边界，float-box则代表放大镜的id-->
  6.         <div id="mark"></div>
  7.         <div id="float-box"></div>
  8.         <img src="img/small.jpg"/>
  9.     </div>
  10. <!--大图片显示区域-->
  11.     <div id="big-box">
  12.         <img src="img/big.jpg"/>
  13.     </div>
  14. </div>
  15. </body>
  16. </html>
  • 然后是样式表的设置。注意对放大镜的图层的处理。主要是和背景图层的色差很明显，便于观察。
  1. * {
  2.             margin: 0;
  3.             padding: 0
  4.         }
  6.         #demo {
  7.             display: block;
  8.             width: 400px;
  9.             height: 255px;
  10.             margin: 50px;
  11.             position: relative;
  12.             border: 1px solid #ccc;
  13.         }
  15.         #small-box {
  16.             position: relative;
  17.             z-index: 1;
  18.         }
  20.         #float-box {
  21.             display: none;
  22.             width: 160px;
  23.             height: 120px;
  24.             position: absolute;
  25.             background: #ffffcc;
  26.             border: 1px solid #ccc;
  27.             filter: alpha(opacity=50);
  28.             opacity: 0.5;
  29.         }
  31.         #mark {
  32.             position: absolute;
  33.             display: block;
  34.             width: 400px;
  35.             height: 255px;
  36.             background-color: #fff;
  37.             filter: alpha(opacity=0);
  38.             opacity: 0;
  39.             z-index: 10;
  40.         }
  42.         #big-box {
  43.             display: none;
  44.             position: absolute;
  45.             top: 0;
  46.             left: 460px;
  47.             width: 400px;
  48.             height: 300px;
  49.             overflow: hidden;
  50.             border: 1px solid #ccc;
  51.             z-index: 1;;
  52.         }
  54.         #big-box img {
  55.             position: absolute;
  56.             z-index: 5
  57.         }
  • 再就是核心的编码了。那就是js代码的逻辑处理，主要是关于鼠标的三个动作事件的捕获和相应的处理。onmouseover,onmouseout,onmousemove三个函数。

  • `

    //注意是页面加载完成后才会执行js代码

    window.onload = function () {

    1.     var objDemo = document.getElementById("demo");
    2.     var objSmallBox = document.getElementById("small-box");
    3.     var objMark = document.getElementById("mark");
    4.     var objFloatBox = document.getElementById("float-box");
    5.     var objBigBox = document.getElementById("big-box");
    6.     var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
    8.     /**
    9.      * 当鼠标放到小图片上时，图片和放大镜开始进行显示
    10.      */
    11.     objMark.onmouseover = function () {
    12.         objFloatBox.style.display = "block";
    13.         objBigBox.style.display = "block";
    14.     };
    16.     /**
    17.      * 鼠标移出时，就会触发响应的事件，然后放大镜和图片不再显示
    18.      */
    19.     objMark.onmouseout = function () {
    20.         objFloatBox.style.display = "none";
    21.         objBigBox.style.display = "none";
    22.     };
    24.     /**
    25.      * 鼠标滑过的时候，对相关的放大的倍数进行计算后对图片进行输出
    26.      */
    27.     objMark.onmousemove = function (ev) {
    29.         var _event = ev || window.event;  //兼容多个浏览器的event参数模式
    31.         /**
    32.          * 这里的clientX是指鼠标在浏览器中的绝对坐标位置，也就是计算网页中图片的位置。然后进行绝对化的图片显示的过程
    33.          */
    34.         var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
    35.         var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;
    37.         /**
    38.          * 此段代码是为了对放大镜区域移出mark标记块的时候的处理。
    39.          * 实现的功能是：放大镜区域只会存在与mark的标记块内部
    40.          */
    41.         if (left < 0) {
    42.             left = 0;
    43.         } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
    44.             left = objMark.offsetWidth - objFloatBox.offsetWidth;
    45.         }
    47.         if (top < 0) {
    48.             top = 0;
    49.         } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
    50.             top = objMark.offsetHeight - objFloatBox.offsetHeight;
    52.         }
    54.         /**
    55.          * 设置放大镜出现的位置
    56.          */
    57.         objFloatBox.style.left = left + "px";   //oSmall.offsetLeft的值是相对什么而言
    58.         objFloatBox.style.top = top + "px";
    60.         var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
    61.         var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);
    63.         /**
    64.          * 这里有亮点需要进行注意：
    65.          * 1.注意负号，因为大图的显示的方向与放大镜的移动方向是相反的
    66.          * 2.注意相乘的比例值的计算
    67.          */
    68.         objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
    69.         objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
    70.     }
    71. }`

效果展示

总结

从上面的代码我学到了什么：

  • 首先是分析问题，只有将问题分析的彻底了，后续的步骤才不会出现意想不到的问题。
  • 然后是实现的思路，仔细想想可以通过什么方式来实现这些需求。
  • 耐心的编码，对事件的处理逻辑把握到位！

JavaScript实现的网页放大镜效果的更多相关文章

  1. 【js】使用javascript 实现静态网页分页效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-Type" content ...

  2. 用JavaScript中jQuery编写放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 【JavaScript】放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JavaScript之放大镜效果2

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

  5. JavaScript之放大镜效果

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

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

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

  7. 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

    未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...

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

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

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

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

随机推荐

  1. C语言程序设计第五次作业--循环结构（1）

    (一)改错题 输出华氏摄氏温度转换表:输入两个整数lower和upper,输出一张华氏摄氏温度转换表,华氏温度的取值范围是{lower,upper},每次增加2℉.计算公式如下: c = 5×(f-3 ...

  2. avalon加载一闪而过现象

      为了避免未经处理的原始模板内容在页面载入时在页面中一闪而过,我们可以使用以下样式(详见这里): .ms-controller,.ms-important,[ms-controller],[ms-i ...

  3. ABP文档笔记 - 数据过滤

    预定义的过滤 ISoftDelete 软删除过滤用来在查询数据库时,自动过滤(从结果中抽取)已删除的实体.如果一个实体可以被软删除,它必须实现ISoftDelete接口,该接口只定义了一个IsDele ...

  4. git使用之错误分析及解决（持续更新）

    错误一: 使用 $ git push -u origin master 出现如下错误: error: src refspec master does not match any. error: fai ...

  5. Go 语言指针

    Go 语言中指针是很容易学习的,Go 语言中使用指针可以更简单的执行一些任务. 接下来让我们来一步步学习 Go 语言指针. 我们都知道,变量是一种使用方便的占位符,用于引用计算机内存地址. Go 语言 ...

  6. Zookeeper的安装部署

    1.Zookeeper的安装部署 7.1 Zookeeper工作机制 7.1.1.Zookeeper集群角色 Zookeeper集群的角色:  Leader 和  follower (Observer ...

  7. Bootstrap3 栅格系统-列排序

    通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <div class="row"> <d ...

  8. Dubbo框架应用之（四）--Dubbo基于Zookeeper实现分布式实例

    上三篇文章主要是解决了概念性的补充和学习,充分结合实战来深入理解 入门实例解析 第一:provider-提供服务和相应的接口 创建DemoService接口 package com.unj.dubbo ...

  9. iOS 中的block异常

    转自:iOS 知识小集 我们在调用block时,如果这个block为nil,则程序会崩溃,报类似于EXC_BAD_ACCESS(code=1, address=0xc)异常[32位下的结果,如果是64 ...

  10. Scala：提取器(Extractor)

    http://blog.csdn.net/pipisorry/article/details/52902671 提取器是从传递给它的对象中提取出构造该对象的参数. Scala 标准库包含了一些预定义的 ...