下面是 “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实现跟随鼠标移动显示选中效果 - Python技术站
微信扫一扫 
支付宝扫一扫 