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

实现的原理

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

编码实现

  • 大结构是如下：

    外边套一个最大的区域块，然后再里面添加不同的显示。
<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. ESLint规范

    配置如下:{ // 环境定义了预定义的全局变量. "env": { //环境定义了预定义的全局变量.更多在官网查看 "browser":true, " ...

  2. jQuery 捕获

    jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使 ...

  3. django的流程和命令行工具

    django实现流程django #安装: pip3 install django 添加环境变量 #1 创建project django-admin startproject mysite ---my ...

  4. 工作流引擎 Flowable 6.0.0.RC1 release，完全兼容Activi

    Flowable 6.0.0.RC1 release,第一个可流动的6引擎版本(6.0.0.RC1). Flowable 6.0.0.RC1 relase新增加的功能以及特色: 包重命名为org.Fl ...

  5. 豌豆夹Redis解决方案Codis安装使用

    豌豆夹Redis解决方案Codis安装使用 1.安装 1.1 Golang环境 Golang的安装非常简单,因为官网被墙,可以从国内镜像如studygolang.com下载. [root@vm roo ...

  6. 20160213.CCPP体系详解(0023天)

    程序片段(01):全排列.c 内容概要:全排列密码库 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <std ...

  7. 大数据基础知识问答----spark篇，大数据生态圈

    Spark相关知识点 1.Spark基础知识 1.Spark是什么? UCBerkeley AMPlab所开源的类HadoopMapReduce的通用的并行计算框架 dfsSpark基于mapredu ...

  8. Swift Review总结：从 Swift Style 开始

    每个语言都有自己的推荐风格.显然OC与Swift有着不同的风格.当我们开始写Swift,首先要注意的就是按照Swift的风格写,而不是沿用OC的风格. 省略句末的分号 swift推崇简洁的语法.如果一 ...

  9. ant编译mysql驱动

    修改驱动源码后需要重新编译构建,由于mysql编译需要两个jdk版本且还需要hibernate4和junit,这里记录下. 安装ant. 配置两个jdk,5和8.并修改build.xml配置,如下: ...

  10. Python 2.7的字典实现简化版(C语言)

    这是一个能自动调整大小的哈希字典,外部接口实现了下列功能. 1.字典级别: 创建字典 dict_new 归零字典 dict_clear 2.键值级别: 查找 dict_search 强制查找 dict ...