js 放大镜(详细注释)

9 篇文章 0 订阅

放大镜四要素

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

css部分:

<style>
			.little{
				width: 640px;
				height: 400px;
				border: 1px solid black;
				position: relative;
			}
			/* 小图 */
			.little img{
				width: 640px;
				height: 400px;
			}
			/* 小放大镜 */
			.little .mark{
				width: 320px;
				height: 200px;
				background-color: yellow;
				opacity: 0.5;
				position: absolute;
				left: 0;
				top: 0;
				/* 默认隐藏 */
				display: none;
			}
			
			/* 大放大镜 */
			.great{
				width: 960px;
				height: 600px;
			    border: 1px solid red;
				overflow: hidden;
				position: relative;
				/* 默认隐藏 */
				display: none;
			}
			.great img{
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>

HTML部分:

<div class="wrapper">
	<!-- 小图:640*400,缩小3倍 -->
		<div class="little">
			<img src="./imgs/xhr.jpg" alt="">
		<!-- 放大镜:320*200 -->
	        <div class="mark"></div>
	    </div>
	  		
	    <!-- 大放大镜 -->
	    <div class="great">
	       <!-- 大图:1920*1200 -->
	       <img src="./imgs/xhr.jpg" alt="">
	    </div> 	
</div>

JS部分:

    <script>
			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.clientX-_litte.offsetLeft-_mark.offsetWidth/2;
				var dy=event.clientY-_litte.offsetTop-_mark.offsetHeight/2;
				//到左边
				if(dx<=0){
					dx=0;
				}
				// 到最右边
				if(dx>=_litte.offsetWidth-_mark.offsetWidth){
					dx=_litte.offsetWidth-_mark.offsetWidth;
				}
				_mark.style.left=dx+"px";
				//到上边
				if(dy<=0){
					dy=0;
				}
				//到下边
				if(dy>=_litte.offsetHeight-_mark.offsetHeight){
					dy=_litte.offsetHeight-_mark.offsetHeight;
				}
				_mark.style.top=dy+"px";
				
				_img.style.left=-3*dx+"px";
				_img.style.top=-3*dy+"px";
			}
		</script>

结果展示:

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值