放大镜总结

最新推荐文章于 2024-10-11 19:03:40 发布

LW0512

最新推荐文章于 2024-10-11 19:03:40 发布

阅读量192

点赞数

分类专栏：放大镜文章标签：前端

本文链接：https://blog.csdn.net/LW0512/article/details/108911630

版权

放大镜专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.offsetLeft
offsetTop
offsetWidth			获取元素的宽
offsetHeight		获取元素的高

2.document.documentElement.clientWidth    获取可视窗口的宽度
document.documentElement.clientHeight	  获取可视窗口的高度
Element.clientWidth
Element.clientHeight

3:scrollLeft    横滚动条的值
  scrollTop		竖滚动条的值

放大镜效果图

在这里插入图片描述
代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.min_img{
				/*1920 x 1080*/
				width: 480px;
				height: 270px;
				background-image: url(img/large.jpg);
				background-size: 100%;
				position: relative;
			}
			.fdj{
				width: 140px;
				height: 100px;
				background: #ccc;
				opacity: 0.4;
				position: absolute;
				display: none;
			}
			.max_img{
				/*1920 x 1080*/
				width: 480px;
				height: 270px;
				overflow: hidden;
				border: 1px solid red;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="min_img">
			<div class="fdj"></div>
		</div>
		<div class="max_img">
			<img src="img/large.jpg"/>
		</div>
	</body>
	<script type="text/javascript">
		var ofdj=document.getElementsByClassName('fdj')[0];
		var omin_img=document.getElementsByClassName('min_img')[0];
		var omax_img=document.getElementsByClassName('max_img')[0];
		document.onmousemove=function(e){
			var e=e||window.event;
			l=e.clientX-ofdj.offsetWidth/2;
			t=e.clientY-ofdj.offsetHeight/2;
			if(l<0){
				l=0;
			}
			if(t<0){
				t=0;
			}
			if(l>omin_img.offsetWidth-ofdj.offsetWidth){
				l=omin_img.offsetWidth-ofdj.offsetWidth;
			}
			if(t>omin_img.offsetHeight-ofdj.offsetHeight){
				t=omin_img.offsetHeight-ofdj.offsetHeight;
			}
			ofdj.style.left=l+'px';
			ofdj.style.top=t+'px';
			omax_img.scrollLeft=l*4;
			omax_img.scrollTop=t*4;
		}
		omin_img.onmouseover=function(){
			ofdj.style.display='block';
			omax_img.style.display='block'
		}
		omin_img.onmouseout=function(){
			ofdj.style.display='none';
			omax_img.style.display='none';
		}
	</script>
</html>