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创建对象的几种方式及关于this指向问题

    当我们使用 JavaScript 开发应用时, 经常要通过创建对象来实现某些功能。JavaScript 中有多种方式可以创建对象,下面是几种常见的方法。 1. 字面量方式 最常见的创建对象的方式就是使用字面量方式,我们使用对象字面量来创建一个对象,并将其赋值给一个变量或常量。 const obj = { name: ‘Tom’, age: 20 } 对象字面…

    JavaScript 2023年5月27日
    00
  • javascript 双色球对奖器

    JavaScript 双色球对奖器是一个基于前端技术的小工具,帮助用户输入自己选的号码和彩票开奖号码,判断是否中奖,并给出相应的提示。以下是详细的攻略过程: 1. 准备工作 在编写 JavaScript 双色球对奖器之前,需要掌握 HTML、CSS 和 JavaScript 基本知识。同时,需要了解彩票双色球的规则和中奖方式,以便编写判断代码。 2. 编写 …

    JavaScript 2023年6月11日
    00
  • javascript字母大小写转换的4个函数详解

    下面是“Javascript字母大小写转换的4个函数详解”的完整攻略。 1. toUpperCase()函数 该函数可以将字符串中的字母全部转换成大写。 语法格式: string.toUpperCase(); 示例: var str1 = ‘hello world’; console.log(str1.toUpperCase()); // 输出: ‘HELL…

    JavaScript 2023年5月27日
    00
  • 浅谈js中test()函数在正则中的使用

    下面是针对“浅谈js中test()函数在正则中的使用”的完整攻略: 前言 正则表达式是一种强大的工具,可用于在文本中搜索特定的模式。正则表达式由一个模式字符串和用于搜索该模式的标志组成,JS内置RegExp对象可以实现正则表达式匹配,test()函数是用于测试字符串是否匹配某个正则表达式的方法。 test()函数的语法与返回值 test()函数的语法如下: …

    JavaScript 2023年6月10日
    00
  • js实现获取两个日期之间所有日期的方法

    首先,我们可以利用 JavaScript 中的 Date 对象来进行日期计算和格式化,从而实现获取两个日期之间所有日期的方法。以下是实现方法的步骤: 定义一个函数,接收两个参数,表示开始日期(start)和结束日期(end)。 利用 Date.parse() 方法将日期字符串转换为时间戳,方便后面的计算。 利用 Math.abs() 方法求出两个日期之间的毫…

    JavaScript 2023年5月27日
    00
  • javascript 补零 函数集合

    标题: JavaScript 补零 函数集合 介绍:在 JavaScript 中,有时候我们需要对数字进行处理,让它们保持一定的长度,并在前面添加 “0” (零) ,这时候就需要用到补零函数。本文将详细讲解 JavaScript 补零 函数集合和应用场景。 函数列表 函数一:补零函数补充 函数二:转化成固定长度字符串函数 函数三:Date 对象转化成指定格式…

    JavaScript 2023年5月27日
    00
  • 详解javascript高级定时器

    详解JavaScript高级定时器 在JavaScript中,定时器是一种非常强大的机制,它允许你在未来的某个时间点执行某些代码。在本文中,我们将探讨JavaScript高级定时器的各种用法和技巧。 setTimeout setTimeout允许你在一定的延迟之后执行一段代码。语法如下: setTimeout( function() { // 在这里写需要执…

    JavaScript 2023年6月11日
    00
  • 【学习笔记】JS

    JS JS教程 HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 控制了网页的行为 简介 1、什么是JS? JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。 2、JS有哪些作用? 直接写入 HTML 输出流…

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