JS实现鼠标框选效果完整实例

下面是详细的“JS实现鼠标框选效果完整实例”的完整攻略,包含两条示例说明。

概述

鼠标框选效果是一种常见的 Web 应用程序 UI 设计。具体来说,通过 JavaScript 实现鼠标框选效果,可以让用户在多个元素中选择他们想要的元素。

实现鼠标框选效果的核心在于:鼠标按下之后从鼠标按下位置到鼠标移动位置之间的所有元素会被高亮标记,鼠标释放后,所有被标记的元素应该被选中。

实现步骤

  1. 添加一个鼠标按下事件监听器
    • 当鼠标按下时,需要记录开始选取的起点位置
    • 开始选取后可以清除所有的选中状态
  2. 添加一个鼠标移动事件监听器
    • 记录当前移动位置
    • 计算选择框的位置和大小
    • 找到位于选择框内的所有元素
    • 将这些元素标记为选中状态
  3. 添加一个鼠标释放事件监听器
    • 清除所有选择框和选择状态

代码实现

下面,我们提供一个完整的例子来演示如何使用 JavaScript 实现鼠标框选效果的实战应用。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JS 实现鼠标框选效果</title>
    <style>
        .box {
            width: 100px;
            height: 50px;
            background-color: #ccc;
            border: 1px solid #000;
            margin: 10px;
            float: left;
            position: relative;
        }

        .box.selected {
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

    <script>
        var isMouseDown = false;
        var isMouseMove = false;
        var container = document.body;
        var selection = document.createElement('div');
        var oriX, oriY;
        var curX, curY;
        var offsetX = container.offsetLeft,
            offsetY = container.offsetTop;
        var boxes = document.querySelectorAll('.box');

        selection.style.cssText = 'border: 1px dashed #000; position: absolute; background-color: #eee; opacity: 0.5; z-index: 1000;';

        container.addEventListener('mousedown', function (e) {
            isMouseDown = true;
            isMouseMove = false;
            oriX = e.clientX - offsetX;
            oriY = e.clientY - offsetY;

            selection.style.left = oriX + 'px';
            selection.style.top = oriY + 'px';
            selection.style.width = '0px';
            selection.style.height = '0px';
            container.appendChild(selection);

            boxes.forEach(function (item) {
                item.classList.remove('selected');
            });
        });

        container.addEventListener('mousemove', function (e) {
            if (!isMouseDown) {
                return false;
            } else {
                isMouseMove = true;
                curX = e.clientX - offsetX;
                curY = e.clientY - offsetY;

                var minWidth = Math.min(oriX, curX);
                var minHeight = Math.min(oriY, curY);
                var maxWidth = Math.abs(curX - oriX);
                var maxHeight = Math.abs(curY - oriY);

                selection.style.left = minWidth + 'px';
                selection.style.top = minHeight + 'px';
                selection.style.width = maxWidth + 'px';
                selection.style.height = maxHeight + 'px';

                for (var i = 0; i < boxes.length; i++) {
                    var boxX = boxes[i].offsetLeft + boxes[i].offsetWidth,
                        boxY = boxes[i].offsetTop + boxes[i].offsetHeight;
                    if (boxX > minWidth && boxY > minHeight && boxes[i].offsetLeft < (minWidth + maxWidth) && boxes[i].offsetTop < (minHeight + maxHeight)) {
                        boxes[i].classList.add('selected');
                    } else {
                        boxes[i].classList.remove('selected');
                    }
                }
            }
        });

        container.addEventListener('mouseup', function (e) {
            isMouseDown = false;
            if (selection.parentNode === container) {
                container.removeChild(selection);
            }
            if (isMouseMove === false) {
                boxes.forEach(function (item) {
                    item.classList.remove('selected');
                });
            }
        });
    </script>
</body>

</html>

以上代码用纯 JavaScript 实现了简单的鼠标框选效果,用户可以在网页上单击鼠标左键并拖动,就可以选择指定区域内的元素。同时,在本例中,还实现了鼠标框选状态切换的功能,即当用户框选一块区域,框选区域中包含的元素会被添加选中状态,并且选取出来进行高亮标记。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS实现鼠标框选效果完整实例 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • javascript中的五种基本数据类型

    当谈到JavaScript的数据类型时,你应该了解有五个基本数据类型,分别是: 数字类型 (Number) 字符串类型 (String) 布尔类型 (Boolean) 空值类型 (Null) 未定义类型 (Undefined) 下面我们一一来详细讲解: 1. 数字类型 (Number) JavaScript中的数字类型包括整数和浮点数。 它们都被表示为Num…

    JavaScript 2023年5月17日
    00
  • $()JS小技巧

    $()JS小技巧 在前端开发中,我们经常需要对DOM元素进行操作,而jQuery库可以帮助我们更方便地实现这些操作。其中一个最常用的方法是$(),它可以获取DOM元素并对其进行操作。 基本语法 $()是jQuery的一种基本语法,它可以通过选择器来选取HTML元素,并返回一个jQuery对象。基本语法如下: $(selector).action() 其中的s…

    JavaScript 2023年5月18日
    00
  • js中new一个对象的过程

    当我们在JavaScript中使用new关键字来创建一个对象时,实际上会发生以下过程: 创建一个新对象。这个新对象继承了它的构造函数的prototype属性。 function Person(name) { this.name = name; } let person = new Person(‘小明’); 在这个例子中,创建了一个名为Person的构造函数…

    JavaScript 2023年5月27日
    00
  • javascript发送短信验证码实现代码

    下面就为你详细讲解“javascript发送短信验证码实现代码”的完整攻略。 一、准备工作 在开始实现过程之前,首先需要准备以下工作: 确保你的网站支持发送短信验证码功能,可以参考短信发送平台的文档进行配置; 在网站中引入 jQuery 和 SMS SDK 的相关资源文件。 二、实现过程 1. 初始化 SDK 在页面加载完成后,需要先初始化 SDK。一般情况…

    JavaScript 2023年6月11日
    00
  • Vue实现调用PC端摄像头实时拍照

    下面我来详细讲解一下Vue实现调用PC端摄像头实时拍照的完整攻略。 1. 获取用户的设备权限和相机设备 在Vue中将调用PC端摄像头分为两步,首先是获取用户的设备权限和相机设备。 //获取用户媒体设备(摄像头) if (navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserM…

    JavaScript 2023年6月11日
    00
  • asp.net 点击按钮提交后使按钮变灰不可用

    要实现在 ASP.NET 中点击按钮提交后使按钮变灰不可用,可以使用 JavaScript 实现。具体的步骤如下: 步骤一:在 ASP.NET 网页中添加按钮和 JavaScript 函数 在 ASP.NET 网页中添加一个按钮,并给按钮添加一个 onclick 事件,如下所示: <asp:Button ID="SubmitButton&qu…

    JavaScript 2023年6月11日
    00
  • javascript文件中引用依赖的js文件的方法

    在JavaScript文件中引用依赖的JS文件的方法有以下几种: 1. 直接引用 在HTML页面中,如果一个JS文件依赖于另一个JS文件,可以直接在HTML中用<script>标签引入需要的JS文件。例如: <!DOCTYPE html> <html> <head> <meta charset=&quot…

    JavaScript 2023年5月27日
    00
  • JavaScript中valueOf函数与toString方法深入理解

    JavaScript中valueOf函数与toString方法深入理解 JavaScript中的对象可以通过自身的函数或方法转换为原始值。其中,valueOf函数和toString方法都可以用来实现此目的。本文将深入探讨valueOf函数与toString方法的区别、使用场景、如何自定义和优先级等问题,并通过示例说明它们的使用方法。 区别 valueOf v…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部