获取鼠标位置，以及字体样式

最新推荐文章于 2022-05-03 11:48:46 发布
tb3706666
最新推荐文章于 2022-05-03 11:48:46 发布
阅读量317
点赞数
分类专栏： Web前端文章标签：鼠标字体
本文链接：https://blog.csdn.net/tb3706666/article/details/78620545
版权
Web前端专栏收录该内容
19 篇文章 0 订阅
订阅专栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>显示鼠标坐标且文字发光</title>
</head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(document).mousemove(function(e){
        $("#coordinate").text("X:"+e.pageX + "  Y:"+e.pageY);
    });

	$('.test1').click(function(){
	$('.coordinate').css('color','#B6FF00').toggleClass('coordinateneon1')
	})
	
	$('.test2').click(function(){
	$('.coordinate').css('color','#FF1177').toggleClass('coordinateneon2')
	})
	
	$('.test3').click(function(){
	$('.coordinate').css('color','#228DFF').toggleClass('coordinateneon3')
	})
	
	$('.test4').click(function(){
	$('.coordinate').css('color','#FFDD1B').toggleClass('coordinateneon4')
	})
	
	$('.test5').click(function(){
	$('.coordinate').css('color','#FF9900').toggleClass('coordinateneon5')
	})
	
	$('.test6').click(function(){
	$('.coordinate').css('color','#BA01FF').toggleClass('coordinateneon6')
	})
	
	$('.test7').click(function(){
	$('.coordinate').css('color','#252527').toggleClass('coordinateneon7')
	})
	
	$('.test8').click(function(){
	$('.coordinate').css('color','hsl(192, 100%, 31%)').toggleClass('coordinateneon8')
	})
	
	$('.testt').click(function(){
	$('.coordinate').removeClass().addClass('coordinate');
	})
	
	
});
</script>
</head>
<style>
.test{
	margin-top:10px;
	margin-left:10px;
	width:100px;
	line-height:40px;
	height:40px;
	font-size:20px;
	color:#FFF;
	font-weight:bolder;
	border-radius:5px;
	border:0;
	outline:none;
	box-shadow:3px 3px 3px #333;
	cursor:pointer;
}
.test1{
		background-color:#99FF00;
		}
.test2{
		background-color:#FF1177;
		}
.test3{
		background-color:#228DFF;
		}
.test4{
		background-color:#FFDD1B;
		}
.test5{
		background-color:#FF9900;
		}
.test6{
		background-color:#BA01FF;
		}
.test7{
		background-color:#252527;
		}
.test8{
		background-color:hsl(192, 100%, 31%);
		}
.testt{
		background-color:red;
		}
#coordinate {
	color:#9FC;
	height:500px;
	line-height:500px;
	cursor:pointer;
	font-size:100px;
	font-weight:bold;
	background-color:#000;
	text-align:center;
}

/*荧光绿色字体*/
.coordinateneon1{
	-webkit-animation:neon1 1.5s ease-in-out infinite alternate;
	-moz-animation:neon1 1.5s ease-in-out infinite alternate;
	animation:neon1 1.5s ease-in-out infinite alternate;

}
/*粉紫色字体*/
.coordinateneon2{
	-webkit-animation:neon2 1.5s ease-in-out infinite alternate;
	-moz-animation:neon2 1.5s ease-in-out infinite alternate;
	animation:neon2 1.5s ease-in-out infinite alternate;
}
/*天蓝色字体*/
.coordinateneon3{
	-webkit-animation:neon3 1.5s ease-in-out infinite alternate;
	-moz-animation:neon3 1.5s ease-in-out infinite alternate;
	animation:neon3 1.5s ease-in-out infinite alternate;
}
/*蛋黄色字体*/
.coordinateneon4{
	font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
	-webkit-animation:neon4 1.5s ease-in-out infinite alternate;
	-moz-animation:neon4 1.5s ease-in-out infinite alternate;
	animation:neon4 1.5s ease-in-out infinite alternate;
}
/*土黄色字体*/
.coordinateneon5{
	-webkit-animation:neon5 1.5s ease-in-out infinite alternate;
	-moz-animation:neon5 1.5s ease-in-out infinite alternate;
	animation:neon5 1.5s ease-in-out infinite alternate;
}
/*淡紫色字体*/
.coordinateneon6{
	-webkit-animation:neon6 1.5s ease-in-out infinite alternate;
	-moz-animation:neon6 1.5s ease-in-out infinite alternate;
	animation:neon6 1.5s ease-in-out infinite alternate;
}
/*镂空字体*/
.coordinateneon7{
	-webkit-text-stroke: 2px white;
	text-shadow: 0 1px 0 #4a4a4e,-1px -1px 0 #4a4a4e, /*main 3d shadow*/ -1px 0px 0 #343437, -2px 1px 0 #343437, -3px 2px 0 #313134, -4px 3px 0 #2f2f31, -5px 4px 0 #2c2c2f, -6px 5px 0 #2a2a2c, -7px 6px 0 #27272a, -8px 7px 0 #252527, -9px 8px 0 #232324, -10px 9px 0 #202022, -11px 10px 0 #1e1e1f, -12px 11px 0 #1b1b1d, -13px 12px 0 #19191a, -14px 13px 0 #161617, -15px 14px 0 #141415, -16px 15px 0 #111112, /*top right*/ 0 -1px 1px #ffffff, 0 -2px 0px #ffffff, /*bottom left corner*/ -15px 14px 0px #ffffff, -16px 15px 0px #ffffff, -17px 16px 0px #ffffff, -18px 17px 0px #ffffff, -2px -1px 0 #ffffff, -3px 0px 0 #ffffff, /*top left corner*/ -19px 15px 0 #ffffff, -18px 14px 0 #ffffff, -17px 13px 0 #ffffff, -16px 12px 0 #ffffff, -15px 11px 0 #ffffff, -14px 10px 0 #ffffff, -13px 9px 0 #ffffff, -12px 8px 0 #ffffff, -11px 7px 0 #ffffff, -10px 6px 0 #ffffff, -9px 5px 0 #ffffff, -8px 4px 0 #ffffff, -7px 3px 0 #ffffff, -6px 2px 0 #ffffff, -5px 1px 0 #ffffff, -4px 0px 0 #ffffff, /*lower right / (upper right side for capital T like H etc letters. */ 0px 2px 0px #ffffff, -1px 3px 0px #ffffff, -2px 4px 0px #ffffff, -3px 5px 0px #ffffff, -4px 6px 0px #ffffff, -5px 7px 0px #ffffff, -6px 8px 0px #ffffff, -7px 9px 0px #ffffff, -8px 10px 0px #ffffff, -9px 11px 0px #ffffff, -10px 12px 0px #ffffff, -11px 13px 0px #ffffff, -12px 14px 0px #ffffff, -13px 15px 0px #ffffff, -14px 16px 0px #ffffff, -15px 17px 0px #ffffff;
}
/*艺术字体*/
.coordinateneon8{
font-family: 'Boogaloo', cursive;
    text-shadow: 0 1px 0 hsl(192, 100%, 21%), 0 2px 0 hsl(192, 100%, 21%), 0 3px 0 hsl(192, 100%, 21%), 0 4px 0 hsl(192, 100%, 21%), 0 5px 0 hsl(192, 100%, 21%), 0 6px 1px hsla(0, 0%, 0%, .1), 0 0 5px hsla(0, 0%, 0%, .1), 0 1px 3px hsla(0, 0%, 0%, .3), 0 3px 5px hsla(0, 0%, 0%, .2), 0 5px 10px hsla(0, 0%, 0%, .25);
	}

@keyframes neon1 {  
  from {  
    text-shadow:0 0 10px #fff,  
               0 0 20px  #fff,  
               0 0 30px  #fff,  
               0 0 40px  #B6FF00,  
               0 0 70px  #B6FF00,  
               0 0 80px  #B6FF00,  
               0 0 100px #B6FF00,  
               0 0 150px #B6FF00;  
  }  
  to {  
  text-shadow: 0 0 5px #fff,  
               0 0 10px #fff,  
               0 0 15px #fff,  
               0 0 20px #B6FF00,  
               0 0 35px #B6FF00,  
               0 0 40px #B6FF00,  
               0 0 50px #B6FF00,  
               0 0 75px #B6FF00;  
  }  
}
/*荧光绿色字体*/
@-webkit-keyframes neon2 {  
  from {  
    text-shadow: 0 0 10px #fff,  
               0 0 20px  #fff,  
               0 0 30px  #fff,  
               0 0 40px  #FF1177,  
               0 0 70px  #FF1177,  
               0 0 80px  #FF1177,  
               0 0 100px #FF1177,  
               0 0 150px #FF1177;  
  }  
  to {  
    text-shadow: 0 0 5px #fff,  
               0 0 10px #fff,  
               0 0 15px #fff,  
               0 0 20px #FF1177,  
               0 0 35px #FF1177,  
               0 0 40px #FF1177,  
               0 0 50px #FF1177,  
               0 0 75px #FF1177;  
  }  
}  
  
@-webkit-keyframes neon3 {  
  from {  
    text-shadow: 0 0 10px #fff,  
               0 0 20px  #fff,  
               0 0 30px  #fff,  
               0 0 40px  #228DFF,  
               0 0 70px  #228DFF,  
               0 0 80px  #228DFF,  
               0 0 100px #228DFF,  
               0 0 150px #228DFF;  
  }  
  to {  
    text-shadow: 0 0 5px #fff,  
               0 0 10px #fff,  
               0 0 15px #fff,  
               0 0 20px #228DFF,  
               0 0 35px #228DFF,  
               0 0 40px #228DFF,  
               0 0 50px #228DFF,  
               0 0 75px #228DFF;  
  }  
}  
  
@-webkit-keyframes neon4 {  
  from {  
    text-shadow: 0 0 10px #fff,  
               0 0 20px  #fff,  
               0 0 30px  #fff,  
               0 0 40px  #FFDD1B,  
               0 0 70px  #FFDD1B,  
               0 0 80px  #FFDD1B,  
               0 0 100px #FFDD1B,  
               0 0 150px #FFDD1B;  
  }  
  to {  
    text-shadow: 0 0 5px #fff,  
               0 0 10px #fff,  
               0 0 15px #fff,  
               0 0 20px #FFDD1B,  
               0 0 35px #FFDD1B,  
               0 0 40px #FFDD1B,  
               0 0 50px #FFDD1B,  
               0 0 75px #FFDD1B;  
  }  
}
@-webkit-keyframes neon5 {  
  from {  
    text-shadow: 0 0 10px #fff,  
               0 0 20px  #fff,  
               0 0 30px  #fff,  
               0 0 40px  #FF9900,  
               0 0 70px  #FF9900,  
               0 0 80px  #FF9900,  
               0 0 100px #FF9900,  
               0 0 150px #FF9900;  
  }  
  to {  
    text-shadow: 0 0 5px #fff,  
               0 0 10px #fff,  
               0 0 15px #fff,  
               0 0 20px #FF9900,  
               0 0 35px #FF9900,  
               0 0 40px #FF9900,  
               0 0 50px #FF9900,  
               0 0 75px #FF9900;  
  }  
}  
  
@-webkit-keyframes neon6 {  
  from {  
    text-shadow: 0 0 10px #fff,  
               0 0 20px #fff,  
               0 0 30px #fff,  
               0 0 40px #ff00de,  
               0 0 70px #ff00de,  
               0 0 80px #ff00de,  
               0 0 100px #ff00de,  
               0 0 150px #ff00de;  
  }  
  to {  
    text-shadow: 0 0 5px #fff,  
               0 0 10px #fff,  
               0 0 15px #fff,  
               0 0 20px #ff00de,  
               0 0 35px #ff00de,  
               0 0 40px #ff00de,  
               0 0 50px #ff00de,  
               0 0 75px #ff00de;  
  }  
}


</style>
<body>
<div id="coordinate" class="coordinate">这是鼠标当前位置</div>
<button class="test test1">荧光绿</button>
<button class="test test2">粉紫</button>
<button class="test test3">天蓝</button>
<button class="test test4">蛋黄</button>
<button class="test test5">土黄</button>
<button class="test test6">淡紫</button>
<button class="test test7">镂空</button>
<button class="test test8">艺术</button>
<button class="test testt">重置特效</button>
</body>
</html>