我想模拟一个“扫描”灯,它将显示框中的单词,这是我现在的代码:
const e = document.getElementsByClassName('scan')[0];
document.onmousemove = function(event){
e.style.left = `${event.clientX}px`;
};Run Code Online (Sandbox Code Playgroud)
*{
margin: 0;
padding: 0;
}
html, body{
width: 100%;
min-height: 100vh;
overflow-x: hidden;
display: flex;
}
.banner{
width: 100vw;
height: 100vh;
display: flex;
flex-grow: 1;
flex-direction: row;
align-items: center;
background-color: #031321;
}
.banner .scan{
width: 7px;
height: 80%;
position: absolute;
left: 30px;
z-index: 3;
transition: left 50ms ease-out 0s;
border-radius: 15px;
background-color: #fff;
box-shadow:
0 0 15px 5px #fff, /* inner white */
0 0 35px 15px …Run Code Online (Sandbox Code Playgroud)我编写以下代码,并尝试在用户单击并拖动鼠标时创建一个选择框
var draggingMouse = false;
var leftMouseDrag, topMouseDrag;
$(document).on("mousedown mouseup", "#cloud_main_page", function(e){
if (e.type == "mousedown") {
draggingMouse = true;
var offset = $(this).offset();
leftMouseDrag = e.pageX - offset.left;
topMouseDrag = e.pageY - offset.top
$("#cloud_main_page .cloud_mouse_selection").css({"top": topMouseDrag, "left" : leftMouseDrag});
} else{
draggingMouse = false;
$("#cloud_main_page .cloud_mouse_selection").removeAttr("style");
}
}).on("mousemove", "#cloud_main_page", function(e){
if(draggingMouse){
var offsetDrag = $("#cloud_main_page .cloud_mouse_selection").offset();
var top = e.pageY - offsetDrag.top;
var left = e.pageX - offsetDrag.left;
var width = Math.abs(left);
var height = Math.abs(top);
$("#cloud_main_page .cloud_mouse_selection").css({"width": width, …Run Code Online (Sandbox Code Playgroud)