沃梦达 / 编程技术 / 前端开发 / 正文

html+css+javascript实现跟随鼠标移动显示选中效果

前端开发
2024-01-23

下面是 “html+css+javascript实现跟随鼠标移动显示选中效果”的完整攻略：

下面是 “html+css+javascript实现跟随鼠标移动显示选中效果”的完整攻略：

1. 前置知识

在开始实现之前，需要具备以下基础知识：

  • HTML：了解HTML基本结构和标签用途；
  • CSS：了解CSS基本布局和属性定义；
  • JavaScript：掌握JavaScript基本语法和DOM操作。

2. 实现步骤

2.1 HTML

首先，需要通过HTML创建网页结构。在<body>标签中添加相应元素，用于实现跟随鼠标移动显示选中效果，例如：

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

这里我们设定一个名为container的盒子，内部有名为box的盒子。

2.2 CSS

接下来，需要通过CSS定义样式。为了实现选中效果，我们可以通过伪元素:before和:after来实现。例如：

.container {
  position: relative;
  height: 200px;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

.box:before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 1px solid #f00;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.box:after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 1px solid #f00;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

与.box相对应的是.box:before和.box:after元素，他们利用伪元素的特性作为小框选区。.box:before和.box:after由于内容区不存在，会默认引入外框的CSS属性继承关系。在这里，我们定义了它们的颜色、大小和透明度属性。

2.3 JavaScript

最后，需要在JavaScript中实现鼠标跟随效果和选中效果。要实现鼠标跟随效果，可以通过mousemove事件获取当前鼠标的位置，然后通过offset()方法和top、left属性设置选中框的位置，例如：

$('.container').mousemove(function(e) {
  var x = e.pageX - $(this).offset().left;
  var y = e.pageY - $(this).offset().top;
  $('.box:before').css({
    'left': x + 'px',
    'top': y + 'px'
  });
  $('.box:after').css({
    'left': x + 'px',
    'top': y + 'px'
  });
});

以上代码监听.container盒子的mousemove事件，获取当前的鼠标位置，并且将选中框的位置设置为鼠标位置。这里选择使用jQuery库，也可以使用ES6新增的let、const、箭头函数等特性，注意使用原生JavaScript的时候，需要单独写出不同浏览器的兼容代码。

最后，为了实现选中效果，可以在选中框的上层添加click事件，通过.toggleClass()方法添加一个类名实现选中效果。例如：

$('.box').click(function() {
  $(this).toggleClass('active');
  $('.box:before, .box:after').toggleClass('active');
});

这里监听.box元素的click事件，利用.toggleClass()方法，向.box、.box:before、.box:after添加active类名，从而实现选中效果。

3. 示例说明

示例1

下面是一个简洁的实现：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>示例1</title>
  <style type="text/css">
    .container {
      position: relative;
      height: 200px;
    }
    .box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-color: #ccc;
    }
    .box:before {
      content: '';
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      border: 1px solid #f00;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .box:after {
      content: '';
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      border: 1px solid #f00;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript">
    $('.container').mousemove(function(e) {
      var x = e.pageX - $(this).offset().left;
      var y = e.pageY - $(this).offset().top;
      $('.box:before').css({
        'left': x + 'px',
        'top': y + 'px'
      });
      $('.box:after').css({
        'left': x + 'px',
        'top': y + 'px'
      });
    });

    $('.box').click(function() {
      $(this).toggleClass('active');
      $('.box:before, .box:after').toggleClass('active');
    });
  </script>
</body>
</html>

在这个示例中，通过style标签定义了CSS样式，并通过.container和.box两个<div>标签来实现跟随鼠标移动显示选中框的效果。初始状态，选中框是不可见的。当鼠标在容器内移动时，选中框会出现并跟随鼠标移动。当鼠标在选中框上点击时，选中框会有一个边框变化。

示例2

下面是一个更加详细的实现，包括了兼容代码和CSS兼容所有浏览器：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>示例2</title>
  <style type="text/css">
    .container {
      position: relative;
      height: 200px;
    }
    .box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-color: #ccc;
    }
    .box:before {
      content: '';
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      border: 1px solid #f00;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .box:after {
      content: '';
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      border: 1px solid #f00;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .active:before {
      opacity: 1;
    }
    .active:after {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
  <script type="text/javascript">
    function getOffset(el) {
      var x = 0;
      var y = 0;

      while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
        x += el.offsetLeft - el.scrollLeft;
        y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
      }

      return { left: x, top: y };
    }

    function onmousemove(e) {
      var x = e.pageX - getOffset(this).left;
      var y = e.pageY - getOffset(this).top;
      this.getElementsByClassName('box')[0].getElementsByClassName('box-before')[0].style.left = x + 'px';
      this.getElementsByClassName('box')[0].getElementsByClassName('box-before')[0].style.top = y + 'px';
      this.getElementsByClassName('box')[0].getElementsByClassName('box-after')[0].style.left = x + 'px';
      this.getElementsByClassName('box')[0].getElementsByClassName('box-after')[0].style.top = y + 'px';
    }

    function onclick() {
      var box = this.getElementsByClassName('box')[0];
      box.classList.toggle('active');
      box.getElementsByClassName('box-before')[0].classList.toggle('active');
      box.getElementsByClassName('box-after')[0].classList.toggle('active');
    }

    var container = document.getElementsByClassName('container')[0];
    container.onmousemove = onmousemove;
    container.onclick = onclick;
  </script>
</body>
</html>

在这个示例中，同样通过style标签定义了CSS样式，与示例1一样定义了选中框的样式。在JavaScript中，定义了getOffset()函数，用于获取元素的相对位置，在移动鼠标的时候根据这个位置计算选中框的位置。在JavaScript中，我们没有使用jQuery，而是直接使用原生JavaScript编写代码，需要注意兼容不同浏览器。

本文标题为：html+css+javascript实现跟随鼠标移动显示选中效果

上一篇： 使用 CSS 轻松实现一些高频出现的奇形怪状按钮
下一篇： CSS基础教程十九之CSS图文混排，图像签名，多图拼接和图片特效

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2