下面是 “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技术站