<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
<body id="body" >
<div id="word" class="word" style="position:absolute;border:solid red 0.5px;background:#0a8db3">
//随鼠标移动的文字 函数
function wordMove() {
//设置随鼠标移动的文字内容
$(".word").text("左键单击开始划线，双击结束划线，右键退出");
//文字隐藏 因为刚开始文字会显示在左上角 移动才触发文字显示
$(".word").hide();
//鼠标移动监听函数
document.addEventListener("mousemove", function (e) {
/**鼠标离开移动区域时,让文字隐藏 在范围内跟随鼠标移动
warning 鼠标移动太快 文字不会隐藏,因为监听不到数值
如果需要达到你想要的的效果 console.log(e.clientX) 打开控制台移动鼠标 找到最后一个值num 改成e.clientX<=num*/
if(e.clientX<=0 || e.clientY <=0 ){
$(".word").hide();
}else {
$(".word").show();//当鼠标移动时文字显示
}
$(".word").css({
"left": e.clientX +"px",
"top": e.clientY +"px",
});
});
//阻止右键事件
document.oncontextmenu =function(){
return false;
}
}
//调用函数
wordMove();
</html>
