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

实现的原理

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

编码实现

  • 大结构是如下：

    外边套一个最大的区域块，然后再里面添加不同的显示。
<body>
<div id="demo">
<!--小图片显示区域-->
    <div id="small-box">
    <!--mark表示小图片的边界，float-box则代表放大镜的id-->
        <div id="mark"></div>
        <div id="float-box"></div>
        <img src="img/small.jpg"/>
    </div>
<!--大图片显示区域-->
    <div id="big-box">
        <img src="img/big.jpg"/>
    </div>
</div>
</body>
</html>
  • 然后是样式表的设置。注意对放大镜的图层的处理。主要是和背景图层的色差很明显，便于观察。
* {
            margin: 0;
            padding: 0
        }

        #demo {
            display: block;
            width: 400px;
            height: 255px;
            margin: 50px;
            position: relative;
            border: 1px solid #ccc;
        }

        #small-box {
            position: relative;
            z-index: 1;
        }

        #float-box {
            display: none;
            width: 160px;
            height: 120px;
            position: absolute;
            background: #ffffcc;
            border: 1px solid #ccc;
            filter: alpha(opacity=50);
            opacity: 0.5;
        }

        #mark {
            position: absolute;
            display: block;
            width: 400px;
            height: 255px;
            background-color: #fff;
            filter: alpha(opacity=0);
            opacity: 0;
            z-index: 10;
        }

        #big-box {
            display: none;
            position: absolute;
            top: 0;
            left: 460px;
            width: 400px;
            height: 300px;
            overflow: hidden;
            border: 1px solid #ccc;
            z-index: 1;;
        }

        #big-box img {
            position: absolute;
            z-index: 5
        }
  • 再就是核心的编码了。那就是js代码的逻辑处理，主要是关于鼠标的三个动作事件的捕获和相应的处理。onmouseover,onmouseout,onmousemove三个函数。

  • `

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

    window.onload = function () {

        var objDemo = document.getElementById("demo");
    var objSmallBox = document.getElementById("small-box");
    var objMark = document.getElementById("mark");
    var objFloatBox = document.getElementById("float-box");
    var objBigBox = document.getElementById("big-box");
    var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];

    /**
     * 当鼠标放到小图片上时，图片和放大镜开始进行显示
     */
    objMark.onmouseover = function () {
        objFloatBox.style.display = "block";
        objBigBox.style.display = "block";
    };

    /**
     * 鼠标移出时，就会触发响应的事件，然后放大镜和图片不再显示
     */
    objMark.onmouseout = function () {
        objFloatBox.style.display = "none";
        objBigBox.style.display = "none";
    };

    /**
     * 鼠标滑过的时候，对相关的放大的倍数进行计算后对图片进行输出
     */
    objMark.onmousemove = function (ev) {

        var _event = ev || window.event;  //兼容多个浏览器的event参数模式

        /**
         * 这里的clientX是指鼠标在浏览器中的绝对坐标位置，也就是计算网页中图片的位置。然后进行绝对化的图片显示的过程
         */
        var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
        var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;

        /**
         * 此段代码是为了对放大镜区域移出mark标记块的时候的处理。
         * 实现的功能是：放大镜区域只会存在与mark的标记块内部
         */
        if (left < 0) {
            left = 0;
        } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
            left = objMark.offsetWidth - objFloatBox.offsetWidth;
        }

        if (top < 0) {
            top = 0;
        } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
            top = objMark.offsetHeight - objFloatBox.offsetHeight;

        }

        /**
         * 设置放大镜出现的位置
         */
        objFloatBox.style.left = left + "px";   //oSmall.offsetLeft的值是相对什么而言
        objFloatBox.style.top = top + "px";

        var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
        var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);

        /**
         * 这里有亮点需要进行注意：
         * 1.注意负号，因为大图的显示的方向与放大镜的移动方向是相反的
         * 2.注意相乘的比例值的计算
         */
        objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
        objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
    }
}`

效果展示

总结

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

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

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. python raise和assert的区别

    python中raise和assert的区别 一.使用raise抛出异常 python可以自动触发异常,raise(内置函数)的定义为显示的抛出异常,用户可以使用raise进行判断,显式的引发异常,r ...

  2. 在 telnet 中利用HTTP协议传递GET、POST参数

    HTTP协议不仅可以用在浏览器中,还可以用在任何支持它的地方,平时用浏览器访问网站时HTTP协议内容是隐藏起来看不到的,用 telnet 就能揭开它的神秘面纱.telnet 开启方法参考文章末尾——t ...

  3. 通过接口标准化ABAP OO开发

    本文是对接口编程的讨论,希望能对年轻的开发者有所帮助. 要点: 通过接口对类方法进行更高层的抽象 接口使代码清晰易读 接口使你可以创建模拟对象(Mockup Object)以提高代码的可测试性 帮助实 ...

  4. struct2利用相关的Aware接口

    Struts 2提供了Aware接口.Aware为"感知"的意思,实现了相关Aware接口的Action能够感知相应的资源.Struts在实例化一个Action实例时,如果发现它实 ...

  5. Android studio安装和问题

    一.Android studio的安装 [提示]A.以下Android studio2.2.2版本.(也有新版本) B.以下是用Android studio自带的sdk ①双击安装文件进行安装 ②如果 ...

  6. 解读Raft（二 选举和日志复制）

    Leader election Raft采用心跳机制来触发Leader选举.Leader周期性的发送心跳(如果有正常的RPC的请求情况下可以不发心跳)包保持自己Leader的角色(避免集群中其他节点认 ...

  7. ACM Find them, Catch them

    The police office in Tadu City decides to say ends to the chaos, as launch actions to root up the TW ...

  8. Hadoop加速器GridGain

    GridGain的Hadoop加速器 像GridGain等内存网格产品(IMDG)不仅可以作为简单的缓存,加速Hadoop中MapReduce计算也是IMDG的一个亮点.这样内存计算领域又多了一种思路 ...

  9. 移动开发之【微信小程序】的原理与权限问题以及相关的简易教程

    这几天圈子里到处都在传播着这样一个东西,微信公众平台提供了一种新的开放能力,开发者可以快速开发一个小程序,取名曰:微信公众平台-小程序 据说取代移动开发安卓和苹果,那这个东东究竟是干吗用的?但很多人觉 ...

  10. Matlab中数据的存储方式

    简介 MATLAB提供了丰富的算法以及一个易于操作的语言,给算法研发工作者提供了很多便利.然而MATLAB在执行某些任务的时候,执行效率偏低,测试较大任务量时可能会引起较长时间的等待.未解决这个问题, ...