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()方法和topleft属性设置选中框的位置,例如:

$('.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实现跟随鼠标移动显示选中效果 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • webpack里使用jquery.mCustomScrollbar插件的方法

    当在webpack中引入jquery.mCustomScrollbar插件时,需要进行一些特殊处理。以下是详细的步骤: 1. 安装jQuery和jQuery.mCustomScrollbar插件 首先,在项目中安装需要使用到的jQuery库和jQuery.mCustomScrollbar插件。可以通过npm安装,执行以下命令: npm install jqu…

    css 2023年6月10日
    00
  • 使用font-face改变字体即加载外部字体

    使用@font-face规则可以在网页中加载外部字体,从而改变网页中的文本字体,并且让文本在任何设备上都显示一致。以下是使用@font-face规则加载外部字体的完整攻略: 步骤一:选择字体文件 选择适合自己网站风格的字体文件,并确保其版权合法。常见的字体类型有TTF、OTF、WOFF等。 步骤二:在样式表中声明@font-face规则 在网站样式表中声明@…

    css 2023年6月9日
    00
  • vue中改变滚动条样式的方法

    以下是详细讲解“Vue中改变滚动条样式的方法”的完整攻略。 改变滚动条样式的方法 1. 使用CSS伪元素改变滚动条样式 可以通过给滚动条容器添加如下CSS样式,利用CSS选择器来美化滚动条。 /*滚动条宽度和颜色设置*/ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #EFE…

    css 2023年6月10日
    00
  • 用css实现的带阴影的表格效果的代码

    下面是实现带阴影的表格的步骤: 步骤一:准备HTML代码 首先,我们需要准备一个HTML的表格代码,可以使用以下代码作为示例: <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </…

    css 2023年6月10日
    00
  • Html+CSS浮动的广告条实现分解

    HTML+CSS浮动的广告条实现分解主要包括以下几个步骤: 创建HTML文件 在HTML文件中,首先需要添加标签来指定文档使用UTF-8编码,然后添加一个div容器作为广告条的父元素,再添加一个a标签作为广告条显示的内容。代码示例如下: <!DOCTYPE html> <html> <head> <meta char…

    css 2023年6月9日
    00
  • 详解webpack进阶之loader篇

    写一篇完整的“详解webpack进阶之loader篇”的攻略需要一定篇幅,我可以为你提供大纲和示例来说明它的主要内容,以及如何理解和应用它所涵盖的技术点。 概述 在“详解webpack进阶之loader篇”中,我们将探讨如何在webpack构建过程中如何应用loader工具。loader是webpack中一个非常重要的概念,它允许我们对不同类型的静态资源进行…

    css 2023年6月9日
    00
  • 在vue中使用css modules替代scroped的方法

    下面是在Vue中使用CSS Modules替代Scoped的方法的完整攻略: 1. 什么是CSS Modules? CSS Modules是一种将CSS模块化的方式,可以解决CSS命名空间的问题。 CSS模块化是在CSS规范的基础上实现的,它支持在CSS文件中使用变量、函数、嵌套、mixins等特性,同时提供了局部作用域,避免了全局命名空间的污染,而CSS …

    css 2023年6月9日
    00
  • CSS中Single Div 绘图技巧的实现

    CSS中的Single Div绘图技巧是一种极具创意和技巧性的CSS绘图方法,是利用一个元素(div)的伪元素(::before和::after)来绘制出复杂的图形。以下是Single Div绘图技巧的实现攻略: 1. 了解CSS中伪元素的使用方法 在CSS中,伪元素如::before和::after可以用来在一个元素前面或后面插入内容,这些内容与元素的内容…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部