初学JS—放大镜的实现

最新推荐文章于 2020-08-31 19:59:44 发布

Js小白~~

最新推荐文章于 2020-08-31 19:59:44 发布

阅读量118

点赞数

文章标签：初学JS

本文链接：https://blog.csdn.net/u010604214/article/details/103067198

版权

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			.box{
				width: 870px;
				height: 430px;
				margin: 120px auto;
				border: 1px solid pink;
				position:relative;
			}
			.small {
				width: 430px;
				height: 430px;
				position:relative;
				top:0px;
				left:0px;
			}
			.small img{
				width: 430px;
				height: 430px;
			}
			.mark{
				width: 231px;
				height: 231px;
				background-color: lightsteelblue;
				position: absolute;
				opacity: 0.5;
				display: none;
				cursor:move;
			}
			.big{
				width: 430px;
				height: 430px;
				display: none;
				position: absolute;
				overflow: hidden; 
				top: 3px;
				left: 440px;
			}
			.big img{
				width: 800px;
				height: 800px;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="box" class="box">
			<div class="small">
				<img src="small.jpg" alt="">
				<div class="mark"></div>
			</div>
			<div class="big">
				<img src="big.jpg" alt="">
			</div>
		</div>
		<script>
			var box =document.getElementById("box");
			var smallBox = box.children[0];
			var bigBox = box.children[1];
			
			var smallPic = smallBox.children[0];
			var mark = smallBox.children[1];
			var bigPic = bigBox.children[0];
			
			smallBox.onmouseover = function(e){
				mark.style.display = "block";
				bigBox.style.display = "block";
				mark.style.left = smallPic.offsetWidth - mark.offsetWidth + 'px';
				mark.style.top = smallPic.offsetHeight - mark.offsetHeight + 'px';
			}
			mark.onmousemove = function(e){
				markX = e.pageX  - box.offsetLeft;
				markY = e.pageY  - box.offsetTop;
				
				
				var markLeft = markX - mark.offsetWidth/2;
				var markTop = markY - mark.offsetHeight/2;
						
				if(markX < mark.offsetWidth/2 ){	
					markLeft = 0;
				}
				if(markX > smallPic.offsetWidth - mark.offsetWidth/2){
					markLeft = smallPic.offsetWidth - mark.offsetWidth ;
				}
				if(markY < mark.offsetHeight/2 ){
					markTop = 0 ;
				}
				if(markY > smallPic.offsetHeight - mark.offsetHeight/2){
					markTop = smallPic.offsetHeight - mark.offsetHeight ;
				}
				mark.style.left = markLeft  + 'px';
				mark.style.top  = markTop + 'px';
				console.log(mark.style.left)
				console.log(mark.style.top )
				bigPic.style.left = -(markLeft * 800 / 430) + 'px';
				bigPic.style.top = -(markTop * 800 / 430) + 'px';
			
			}
		</script>
	</body>
</html>

Js小白~~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学JS—放大镜的实现

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding:0; margin:0; } .box{ width: 870px; he...
复制链接

扫一扫