js放大镜

最新推荐文章于 2021-05-17 20:24:30 发布

ZZZ --- jh

最新推荐文章于 2021-05-17 20:24:30 发布

阅读量272

点赞数 2

分类专栏： JavaScript demo 文章标签： javascript

本文链接：https://blog.csdn.net/ZZZ___jh/article/details/108865174

版权

JavaScript 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

demo

19 篇文章 0 订阅

订阅专栏

这篇博客展示了如何利用JavaScript、CSS和HTML创建一个网页上的图片放大镜功能。当鼠标悬停在缩略图上时，会出现一个半透明的放大区域，跟随鼠标移动，实时显示图片的放大细节。该功能通过监听鼠标移动事件，动态调整放大镜位置及主图滚动，为用户提供查看高清细节的交互体验。

摘要由CSDN通过智能技术生成

js放大镜

css代码 :

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.min_img{
		/*1920 x 1080*/
		width: 480px;
		height: 270px;
		background-image: url(images/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>

html代码 :

	<div class="min_img">
		<div class="fdj"></div>
	</div>
	<div class="max_img">
		<img src="images/large.jpg"/>
	</div>

js代码 :

<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>