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

实现的原理

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

编码实现

  • 大结构是如下：

    外边套一个最大的区域块，然后再里面添加不同的显示。
<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. Git与Github的基本概念

    git git是一个分布式版本控制系统,在这里就要介绍一下什么是版本控制:参考至维基百科 版本控制(Revision control)是维护工程蓝图的标准作法,能追踪工程蓝图从诞生一直到定案的过程.此 ...

  2. Unique-paths （动态规划）

    题目描述 A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below) ...

  3. 清空dataset中的某行某列的数据

    string tempSFZH = ""; foreach (DataRow rs in ds.Tables[0].Rows) {     tempSFZH = rs[ht[&qu ...

  4. kindeditor配合requirejs使用时，ready失效

    KindEditor官方的文档在使用KindEditor时是这样的: KindEditor.ready(function(K)) { K.create('#editor_id'); } 使用了自己提供 ...

  5. 判断是否是IE9浏览器的最短语句 var ie=!-[1,]

    没错,上面这个语句就可以判断浏览器是不是IE9以下的.why?1.[1,]在现代浏览器(ie包括ie9及以上)会被转换成[1], 而ie9以下就会转换成[1,undefined].2.分别对[1],和 ...

  6. python3获取网页天气预报信息并打印

    查到一个可以提供区域天气预报的url, https://www.sojson.com/open/api/weather/json.shtml?city=%E6%88%90%E9%83%BD打算用pyt ...

  7. IntelliJ IDEA安装配置

    1. 从官网安装最新版IntelliJ Idea软件. 2. 激活使用 http://www.3322.cc/soft/37661.html 3. 配置eclipse快捷键 File-->Set ...

  8. 216. Combination Sum III(medium, backtrack, 本类问题做的最快的一次)

    Find all possible combinations of k numbers that add up to a number n, given that only numbers from ...

  9. JAVA局部内部类

    在刚刚学到的android开发中了解到Button的onClick是通过局部内部类的方式实现的,具体的原理我以后再去了解,只是遇到问题总是想知道为什么,不要告诉我这是规则,死记住就可以了. 问题是局部 ...

  10. 05_CRUD操作

      1.Params拦截器: 作用:Parameters拦截器将把表单字段映射到ValueStack栈的栈顶对象的各个属性中, 注意:如果某个字段在栈顶对象中没有对应的属性,则Params拦截器将尝试 ...