用JS写出JS事件中京东图片放大特效

图片放大特效

• 准备两张相同的图片，小图和大图。

• 小图显示在商品的展示区域。

• 大图用于鼠标在小图上移动时，按比例的显示大图中的对应区域。

• 编写HTML页面，展示小图、隐藏鼠标的遮罩及大图。

• 当鼠标在小图上移动时，显示鼠标的遮罩和大图。

• 当鼠标移动时，让遮罩跟着在小图中进行移动。

• 限定遮罩在小图中的可移动范围。

• 根据遮罩在小图中的覆盖范围，按比例的显示大图。

CSS页面代码：

	<style >
			* {
				margin: 0;
				padding: 0;
			}
			.goods{
				margin: 200px;
				width: 350px;
				position: relative;
			}
			.goods-small{
				position: relative;
			}
			.small-mask{
				display: none;
				width: 200px;
				height: 200px;
				opacity: .5;
				background:#fad73d;
				
				cursor: move;
				position: absolute;
				z-index: 9;
			}
			.small-img{
				display: block;
			}
			.goods-big{
				display: none;
				width: 500px;
				height: 500px;
				position: absolute;
				overflow: hidden;
				left: 360px;