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

实现的原理

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

编码实现

  • 大结构是如下：

    外边套一个最大的区域块，然后再里面添加不同的显示。
<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. Spring使用@Scheduled定时调度

    一.spring配置文件中增加对这个注解的支持: 配置文件如下: <?xml version="1.0" encoding="UTF-8"?> &l ...

  2. mac下IDLE无法输入中文的问题

    解决方法是下载安装新版本的 Tcl/Tk 下载地址:http://www.activestate.com/activetcl/downloads 注意要下最新的8.5.18.0版本,安装好了再重启ID ...

  3. Linux配置服务器的一点总结

    一.Linux初始化服务 首先搞清楚四个概念: 进程:正在运行的程序,有自己独立的内存空间. 线程:是进程的下属单位,开销较进程小,没有自己独立的内存空间. 作业:由一系列进程组成,来完成某一项任务. ...

  4. sql server 表分区

    背景: 一般情况下,我们建立数据库表时,表数据都存放在一个文件里. 但是如果是分区表的话,表数据就会按照你指定的规则分放到不同的文件里,把一个大的数据文件拆分为多个小文件,还可以把这些小文件放在不同的 ...

  5. Linux 基本bash命令

    1.查看文件大小.内存大小.cpu信息.硬盘空间 显示当前目录所有文件大小的命令:ls -lht 内存空间.CPU信息.硬盘空间:htop.top(htop详解参考:http://blog.csdn. ...

  6. 浅谈@RequestMapping @ResponseBody 和 @RequestBody 注解的用法与区别

    浅谈@RequestMapping @ResponseBody 和 @RequestBody 注解的用法与区别 Spring 2.5 版本新增了注解功能, 通过注解,代码编写简化了很多:但熟悉注解的使 ...

  7. easyui datagrid 得到冻结列跟非冻结列

    var head = $('#ClassManagement').datagrid("options").columns; var fhead=$('#ClassManagemen ...

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

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

  9. nginx 网络模型,cpu亲和等优点

    nginx优点1.IO多路复用epollIO多路复用:多个描述符的I/O操作都能在一个线程内并发交替地顺序完成,这里的"复用" 指的是复用同一个线程epollIO多路复用的实现方式 ...

  10. vue通过id从列表页跳转到对应的详情页

    1. 列表页:列表页带id跳转到详情页 详情页:把id传回到后台就可以获取到数据了 2.列表页跳转到详情页并更改详情页的标题 列表页:带id和页面标题的typeid跳转到详情页 详情页:在html绑定 ...