JS--仿淘宝主图放大效果

<style>
.box{
	margin: 50px auto;
	zoom: 1;
}
.box:after{
	content: "";
	display: block;
	clear: both;
	
}
#small{
	width: 720px;
	height: 450px;
	padding: 2px;
	border: 1px #bbb solid;
	position: relative;
	float: left;
}
#fangDa{
	width: 200px;
	height: 200px;
	background-color: yellow;
	opacity: 0.3;
	top: 0;
	left: 0;
	position: absolute;
	cursor: all-scroll;
	display: none;
}
#big{
	width: 600px;
	height: 600px;
	overflow: hidden;
	float: left;
	margin-left: 20px;
	display: none;
}
</style>

<div class="box">
	<div id="small">
		<img src="images/small.jpg" />
		<div id="fangDa"></div>
	</div>
	<div id="big">
		<img src="images/big.jpg" />
	</div>
</div>
<script>
function my$(id){
	return document.getElementById(id);
}
//获取小图图片
var smallImg = my$("small").children[0];
//获取大图的图片
var bigImg = my$("big").children[0];
//鼠标进入小图的父级元素，黄色色块和大图显示
my$("small").onmouseover = function(){
	my$("fangDa").style.display = "block";
	my$("big").style.display = "block";
	
}

//鼠标离开小图的父级元素，黄色色块和大图隐藏
my$("small").onmouseout = function(){
	my$("fangDa").style.display = "none";
	my$("big").style.display = "none";
}

//鼠标移动事件
my$("small").onmousemove = function(e){
	//黄色色块的left=鼠标可视区域横坐标-黄色色块宽/2
	var x = e.clientX - my$("fangDa").offsetWidth / 2;
	//黄色色块的top=鼠标可视区域纵坐标-黄色色块高/2 - box的marginTop
	var y = e.clientY - my$("fangDa").offsetHeight / 2 - 50;
	//x的最小值
	x = x <= 0 ? 0 : x;
	//y的最小值
	y = y <= 0 ? 0 : y;
	//x的最大值：small的宽-黄色色块的宽
	x = x >= my$("small").offsetWidth - my$("fangDa").offsetWidth ? my$("small").offsetWidth - my$("fangDa").offsetWidth : x;
	//y的最大值：small的高-黄色色块的高
	y = y >= my$("small").offsetHeight - my$("fangDa").offsetHeight ? my$("small").offsetHeight - my$("fangDa").offsetHeight : y;
	my$("fangDa").style.left = x + "px";
	my$("fangDa").style.top = y + "px";
	
	//黄色色块的位置/大图的位置=遮挡层的最大移动距离/大图的最大移动距离
	//大图的位置=黄色色块的位置*大图的最大移动距离/遮挡层的最大移动距离
	//大图的横向最大移动距离
	var maxX = bigImg.offsetWidth - my$("big").offsetWidth;
	//大图的纵向最大移动距离
	//var maxY = bigImg.offsetHeight - my$("big").offsetHeight;
	
	//大图的横向移动的坐标
	var bigImgMoveX = x * maxX / (my$("small").offsetWidth - my$("fangDa").offsetWidth);
	//大图的纵向移动坐标
	var bigImgMoveY = y * maxX / (my$("small").offsetWidth - my$("fangDa").offsetWidth);
	//设置大图的marginLeft，大图和黄色色块反向移动，所以为负
	bigImg.style.marginLeft = -bigImgMoveX + "px";
	//设置大图的marginTop
	bigImg.style.marginTop = -bigImgMoveY + "px";
}

</script>