放大镜

放大镜原理
放大镜的思想:可以看出来,大图和小图移动的距离是成比例的: 小图的宽度/mask移动的距离 = 大图的宽度/大图移动的距离;并且小图和大图移动的方向是相反的,我们能根据根据上面的公式去求出,大图移动的距离,还要求出大图的宽度:大图 = 小图/mask*big; 当然如果能找到图片大小成比例的,也就不用在求大图的宽度了 。代码奉上:

/*css代码*/
<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#fdj{
				width: 418px;
				height: 418px;
				position: relative;
			}
			.small{
				background: red;
				width: 418px;
				height: 418px;
			}
			.small img{
				width: 418px;
				height: 418px;
				
			}
			
			.big{
				position: absolute;
				height: 418px;
				width: 418px;
				left: 450px;
				top: 0;
				overflow: hidden;
				display: none;
			
			}
			.big-img{
				position: absolute;
				left: 0;
				top: 0;
			}
			
			
			.mask{
				width: 200px;
				height: 200px;
				background: rgba(255,255,0,0.3);
				position: absolute;
				left: 50px;
				top: 50px;
				display: none;
			}
			
		</style>
/*HTML代码*/
<div id="fdj">
			
			<div class="small">
				<img src="leftimg.jpg"/>
				<div class="mask"></div>
			</div>
			
			<div class="big">
				<img class="big-img" src="rimg.jpg"/>
			</div>
			
			
		</div>
/*js代码*/
<script type="text/javascript">
			
			var small = document.querySelector('.small');
			var big = document.querySelector('.big');
			var mask = document.querySelector('.mask');
			var bigImg = document.querySelector('.big-img');
			
			//鼠标进入子元素 不会触发移除父元素事件,也不会触发移入子元素事件
			//移入
			small.onmouseenter = function(){
				//console.log('移入');
				mask.style.display = 'block';
				big.style.display = 'block';
			}
			//移出
			small.onmouseleave = function(){
				console.log('移出');
				mask.style.display = 'none';
				big.style.display = 'none';
			}
			
			var fdj = document.getElementById('fdj');
			small.onmousemove = function(evt){
				//鼠标在small的偏移
				var offsetX = evt.pageX - fdj.offsetLeft;
				var offsetY = evt.pageY - fdj.offsetTop; 
				
				var maskX = offsetX - mask.offsetWidth / 2;
				var maskY = offsetY - mask.offsetWidth / 2;
				
				//边界处理
				if(maskX <= 0){
					maskX = 0;
				}else if(maskX >= small.offsetWidth - mask.offsetWidth){
					maskX = small.offsetWidth - mask.offsetWidth
				}
				if(maskY <= 0){
					maskY = 0;
				}else if(maskY >= small.offsetHeight - mask.offsetHeight){
					maskY = small.offsetHeight - mask.offsetHeight;
				}
				
				mask.style.left = maskX + 'px';
				mask.style.top = maskY + 'px';
				
				
				
				// 小图的宽度/mask移动的距离 = 大图的宽度/大图移动的距离
				//大图的移动距离 = 小图的宽度/mask移动的距离*大图移动的宽度
				var bigleft = maskX/small.offsetWidth*bigImg.offsetWidth;
				var bigtop = maskY/small.offsetWidth*bigImg.offsetWidth;
				
				bigImg.style.left = -bigleft + 'px';
				bigImg.style.top = -bigtop + 'px';
				
				
			}
			
			//大图 = 小图/mask*big;
			var bigImgWidth = 418/200*418;
			console.log(bigImgWidth);
			bigImg.style.width = bigImgWidth + 'px';
			

			
		</script>

效果图

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值