Web Day7_:e.pagex-thumbposx什么意思-CSDN博客

本文链接：https://blog.csdn.net/qq_51944132/article/details/132953397

Web

day7_2023.9.15

事件

blur 当元素失去焦点时发生此事件。
focus 在元素获得焦点时发生此事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.text{
				color: green;
			}
		</style>
	</head>
	<body>
		密码:<input id="pwd" onblur="checkpwd()" onfocus="focusTest()" type="text"> 
		<span class="text"></span> 
		<br>
		重复密码:<input id="repwd" onblur="blurTest()" type="text">
		<span id="info" style="color: black;"></span> 
	</body>
	<script>
	//失去焦点
		function blurTest(){
			var pwdValue = document.querySelector("#pwd").value;
			var repwdValue = document.querySelector("#repwd").value;
			var info = document.querySelector("#info");
			if(pwdValue === repwdValue){
				info.innerHTML = "两次密码相同";
				info.style.color = "green";
			}else{
				info.innerHTML = "两次密码输入不一致";
				info.style.color = "red";
			}
		}
		
		function checkpwd(){
			var pwdValue = document.querySelector("#pwd").value;
			var reg = /^[A-Z]\w{5,17}/
			var spanEle = document.querySelector(".text");
			
			if(reg.test(pwdValue)){
				spanEle.innerHTML = "密码符合规范";
				spanEle.style.color = "green";
			}else{
				spanEle.innerHTML = "密码不符合规范";
				spanEle.style.color = "red";
			}
			
		}
				//获得焦点
		function focusTest(){
			var spanEle = document.querySelector(".text");
			spanEle.innerHTML = "请输入6-18位的密码";
		}
	</script>
</html>

窗口事件

load、resize、scroll
窗口加载就执行函数中的内容，如果某些函数不被直接调用，又想这个函数执行，可以放到这里
window.onload = function(){
}
risize ：窗口变化触发的事件
scroll ：窗口滚动触发的事件


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html,body{
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body onresize="winResize()">
		
	</body>
	<script>
		function winResize(){
			winWidth = document.body.clientWidth;
			winHeight = document.body.clientHeight;
			alert(winWidth + "-----" + winHeight )
		}
	</script>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html,body{
				height: 100%;
			}
		</style>
	</head>
	<body onscroll="scrollHtml()">
		<div style="height: 300%;">
			<span id="test" style="position: relative;top: 0px;">
				滚动了0px
			</span>
		</div>
	</body>
	<script>
		function scrollHtml(){
			var scrollheight = document.documentElement.scrollTop; //滚动的距离
		
			var test = document.querySelector("#test"); //获取span节点
			test.innerHTML = "滚动了"+  scrollheight +"px"
			test.style.top = scrollheight + "px";
		}
	</script>
</html>

click 当用户单击元素时发生此事件。
dblclick 当用户双击元素时发生此事件。
mousedown 当用户在元素上按下鼠标按钮时，发生此事件。
mouseenter 当指针移动到元素上时，发生此事件。
mouseleave 当指针从元素上移出时，发生此事件。
mousemove 当指针在元素上方移动时，发生此事件。
mouseout 当用户将鼠标指针移出元素或其中的子元素时，发生此事件。
mouseover 当指针移动到元素或其中的子元素上时，发生此事件。
mouseup 当用户在元素上释放鼠标按钮时，发生此事件。
clientX 返回触发鼠标事件时，鼠标指针相对于当前窗口的水平坐标。
clientY 返回触发鼠标事件时，鼠标指针相对于当前窗口的垂直坐标。

点击获取鼠标位置


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html,body{
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body onclick="dianji(event)">
	</body>
	<script>
		function dianji(e){
			dianX = e.clientX;
			dianY = e.clientY;
			alert(dianX + "---" + dianY);
		}
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html,body{
				width:100%;
				height: 100%;
			}
			#mdiv{
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: absolute;
			}
			
		</style>
	</head>
	<body onmousemove="move(event)">
		<div id="mdiv" onmousedown="down()" onmouseup="up()"
		 style="top: 100px; left: 100px;">
			
		</div>
	</body>
	<script>
		var mdiv;
		var flag = false;
		function down(){
			 mdiv = document.querySelector("#mdiv");
			 flag = true;  //标记鼠标已经按下了
		}
		
		//移动函数
		function move(e){
			//如果鼠标按下了，就可以移动方块了
			if(flag){
				mdiv.style.top = e.clientY-50 + "px";
				mdiv.style.left = e.clientX-50 + "px";
			}
		}
		function up(){
			flag = false;
		}
	</script>
</html>

keydown 当用户正在按下键时，发生此事件。不松开按键触发
keypress 当用户按下键时，发生此事件。
keyup 当用户松开键时，发生此事件。

使用上下左右，移动方块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="divbox"></div>
	</body>
	<script>
		var divbox = document.querySelector("#divbox");
		//给节点添加样式
		divbox.style.position = "absolute";
		divbox.style.width = "100px";
		divbox.style.height = "100px";
		divbox.style.backgroundColor = "blue";
		document.onkeydown = keyDown; //添加事件
		
		function keyDown(event){
			var event = event||window.event; //标准化事件对象
			switch(event.keyCode){
				case 37:  // 左移
					divbox.style.left = divbox.offsetLeft - 10 + "px";
					break;
				case 38:  //上移
					divbox.style.top = divbox.offsetTop - 10 + "px";
					break;
				case 39:  //右移
					divbox.style.left = divbox.offsetLeft + 10 + "px";
					break;
				case 40:  //下移
					divbox.style.top = divbox.offsetTop + 10 + "px";
					break;
			}
			return false;
		}
	</script>
	
</html>

放大镜效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			img{
				display: block;
			}
			.header{
				height: 100px;
			}
			.center{
				width: 800px;
				margin: 0 auto;
			}
			.box{
				position: relative;
				width: 400px;
			}
			.thumb{
				position: relative;
				width: 400px;
				height: 400px;
			}
			.thumb img{
				width: 100%;
				width: 100%;
			}
			.thumb .move{
				position: absolute;
				top: 0px;
				left: 0px;
				display: none;
				width: 200px;
				height: 200px;
				background-color: rgba(0, 0, 0, 0.2);
			}
			/* 放大区域样式 */
			.scale{
				display: none;
				position: absolute;
				left: 420px;
				top: 0px;
				width: 400px;
				height: 400px;
				overflow: hidden;
			}
			.scale img{
				position: absolute;
				top: 0px;
				left: 0px;
			}
			.thumb:hover .move{
				display: block;
			}
			.thumb:hover+.scale{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="header"></div>
		
		<div class="center">
			<div class="box">
				<div class="thumb">
					<img src="img/lianyiqunSmall1.jpg" alt="">
					<div class="move"></div>
				</div>
				<div class="scale">
					<img src="img/lianyiqunBig1.jpg" alt="">
				</div>
			</div>
		</div>
		
	</body>
	<script>
		var fangdajing = function(){
			//1,获取小图片的节点
			var thumbElem = document.querySelector(".thumb");
			
			//获取图片距离左边和顶部的距离
			var thumbPosX = Math.round(thumbElem.getBoundingClientRect().left);
			var thumbPosY = Math.round(thumbElem.getBoundingClientRect().top);
			
			//获取移动的小块元素信息
			var moveElem = document.querySelector(".move");
			//给小图上的移动小块绑定一个移动事件
			thumbElem.onmousemove = function(e){
				//获取鼠标移动时候的宽和高
				var moveElemWidth = moveElem.offsetWidth;
				var moveEleHeight = moveElem.offsetHeight;
				
				//计算移动元素，距离图片左边和顶部的距离
				//鼠标中心距离小图左边的值
				var x = e.pageX - thumbPosX;
				var y = e.pageY - thumbPosY;
				
				moveElem.style.left = x - moveElemWidth/2 + "px";
				moveElem.style.top = y - moveEleHeight/2 + "px";
				
				//移动区域超过小图区域的处理
				//左右超过
				if( parseInt(moveElem.style.left )< 0){
					moveElem.style.left = 0;
				}else if(parseInt(moveElem.style.left) >
				(thumbElem.offsetWidth -moveElemWidth)){
					moveElem.style.left = thumbElem.offsetWidth -moveElemWidth +"px";
				}
				//上下超过
				if( parseInt(moveElem.style.top )< 0){
					moveElem.style.top = 0;
				}else if(parseInt(moveElem.style.top) >
				(thumbElem.offsetHeight -moveEleHeight)){
					moveElem.style.top = thumbElem.offsetHeight -moveEleHeight +"px";
				}
				
				//放大的处理
				//计算倍数
				var sca = thumbElem.offsetWidth / moveElemWidth;
				var scaleElem = document.querySelector(".scale");
				var img = scaleElem.querySelector("img");
				console.log(img);
				img.style.left = -(sca * parseInt(moveElem.style.left)) + "px";
				img.style.top = -(sca * parseInt(moveElem.style.top)) + "px";
			}
		}
		
		fangdajing();
	</script>
</html>