放大镜的实现代码与详解

最新推荐文章于 2023-03-19 16:40:41 发布

原创最新推荐文章于 2023-03-19 16:40:41 发布 · 576 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#servlet #java #前端

本文介绍了一种通过HTML、CSS及JavaScript实现的图片放大镜效果。该效果利用两张不同尺寸的相同图片，通过鼠标移动来控制小放大镜的位置，并同步调整大图片的显示区域，以达到放大的视觉效果。

放大镜是通过一大，一小两张图片实现的：

           1、原图宽高比例=缩略图宽高比=放大镜的宽高比
           2、大放大镜与小放大镜的倍数=原图与缩略图的倍数
           3、默认两个放大镜与图片都是左上角重叠
           4、原图相对于小放大镜反方向移动相应倍数的距离

		<div class="wrapper">
			<!-- 小图:380*250,缩小2倍 -->
			<div class="little">
				<img src="./imgs/5.png" alt="">
				<!-- 放大镜：190*125 -->
				<div class="mark"></div>
			</div>
			
			<!-- 大放大镜 -->
			<div class="great">
				<!-- 大图:760*500 -->
				<img src="./imgs/5.png" alt="">
			</div>
		</div>

css:

			.little{
				width: 380px;
				height: 250px;
				border: 1px solid black;
				position: relative;
			}
			/* 小图 */
			.little img{
				width: 380px;
				height: 250px;
			}
			/* 小放大镜 */
			.little .mark{
				width: 190px;
				height: 125px;
				background-color: blue;
				opacity: 0.5;
				position: absolute;
				left: 0;
				top: 0;
				/* 默认隐藏 */
				display: none;
			}
			
			/* 大放大镜 */
			.great{
				width: 380px;
				height: 250px;
			    border: 1px solid red;
				overflow: hidden;
				position: relative;
				/* 默认隐藏 */
				display: none;
			}
			.great img{
				position: absolute;
				left: 0;
				top: 0;
			}

js:

            var _litte=document.querySelector(".little"); //小图框
			var _mark=document.querySelector(".mark");  //小放大镜
			var _great=document.querySelector(".great"); //大放大镜
			var _img=document.querySelector(".great img"); //大图
			
			_litte.onmouseover=function(){
				_great.style.display="block";
				_mark.style.display="block";
			}
			_litte.onmouseout=function(){
				_great.style.display="none";
				_mark.style.display="none";
			}
			_litte.onmousemove=function(event){
				//计算小放大镜的x，y
				var dx=event.pageX-_litte.offsetLeft-_mark.offsetWidth/2;
				var dy=event.pageY-_litte.offsetTop-_mark.offsetHeight/2;
				//到左边
				if(dx<=0){
					dx=0;
				}
				// 到最右边
				if(dx>=_litte.offsetWidth-_mark.offsetWidth){
					dx=_litte.offsetWidth-_mark.offsetWidth;
				}
				
				//到上边
				if(dy<=0){
					dy=0;
				}
				//到下边
				if(dy>=_litte.offsetHeight-_mark.offsetHeight){
					dy=_litte.offsetHeight-_mark.offsetHeight;
				}
				_mark.style.top=dy+"px";
				_mark.style.left=dx+"px";
				_img.style.left=-2*dx+"px";
				_img.style.top=-2*dy+"px";
			}