Javascript学习笔记(13_3) --js事件案例(放大镜效果)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>放大镜效果</title>
		<style>
			*{margin:0;padding: 0;}
			#box{
				width:700px;
				height:300px;
				background:greenyellow;
				margin:50px auto;
			}
	
			#box1{
				width:300px;
				height:300px;
				background: #FFA500;
				float: left;
				position: relative;
			}
			#box2{
				width:300px;
				height:300px;
				background: #FFA500;
				overflow: hidden;
				float: right;
				position: relative;
			}
			#dv{
				width: 100px;
				height:100px;
				background:#FFA500;
				position: absolute;
				left:0;
				top:0;
				opacity: 0.5;
			}
			#imgs{
				position: absolute;
				left:0px;
				top:0;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="box1"><img src="images/0.jpg" width="300px"/><div id="dv"></div></div>
			<div id="box2"><img src="images/0.jpg" width="900px" id="imgs"/></div>
		</div>
		<script src="script.js"></script>
	</body>
</html>

var box1 = document.getElementById("box1"),
	dv = document.getElementById("dv"),
	imgs = document.getElementById("imgs");

box1.onmousemove = function(e){
	var e = window.event || e;
	var left = e.clientX - box1.offsetLeft - dv.offsetWidth/2;
	var top  = e.clientY - box1.offsetTop  - dv.offsetHeight/2;
	if(e.clientX <= box1.offsetLeft + dv.offsetWidth/2 ){
		left = 0 ;
	}
	
	if(e.clientY <= box1.offsetTop+ dv.offsetHeight/2){
		top = 0;
	}
	
	if(e.clientX >= box1.offsetLeft+box1.offsetWidth-dv.offsetWidth/2){
		left = box1.offsetWidth-dv.offsetWidth;
	}
	
	if(e.clientY >= box1.offsetTop+box1.offsetHeight-dv.offsetHeight/2){
		top = box1.offsetHeight-dv.offsetHeight;
	}
	dv.style.left = left +"px";
	dv.style.top = top +"px";
	imgs.style.left = -left*3+"px";
	imgs.style.top = -top*3+"px";
}



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值