console 命令行工具 X clear

console

$('#img_x li').eq(0).css('border', '2px solid coral');
	$('#zhezhao').mousemove(function(e){
		$('#img_u').show();
		$('#magnifier').show();
		var left = e.offsetX - parseInt($('#magnifier').width()) / 2;
		var top = e.offsetY - parseInt($('#magnifier').height()) / 2;
		left = left < 0 ? 0 : left;
		left = left > (parseInt($('#zhezhao').outerWidth()) - parseInt($('#magnifier').outerWidth())) ? (parseInt($('#zhezhao').outerWidth()) - parseInt($('#magnifier').outerWidth())) : left;
		top = top < 0 ? 0 : top;
		top = top > (parseInt($('#zhezhao').outerHeight()) - parseInt($('#magnifier').outerHeight())) ? (parseInt($('#zhezhao').outerHeight()) - parseInt($('#magnifier').outerHeight())) : top;

		$('#magnifier').css('left', left + 'px');
		$('#magnifier').css('top', top + 'px');

		var leftRate = left / parseInt($('#zhezhao').outerWidth());
		var bigLeft = leftRate * parseInt($('#img_u img').outerWidth());
		$('#img_u img').css('margin-left', -bigLeft + 'px');

		var topRate = top / parseInt($('#zhezhao').outerHeight());
		var bigTop =  topRate * parseInt($('#img_u img').outerHeight());
		$('#img_u img').css('margin-top', -bigTop + 'px');
	})
	$('#zhezhao').mouseleave(function(){
		$('#img_u').hide();
		$('#magnifier').hide();
	})

	$('#img_x li').mouseover(function(){
		$(this).css('border', '2px solid coral').siblings().css('border', '2px solid transparent');
		$('#mediumContainer img').eq(0).attr('src', 'http://img3m3.ddimg.cn/2/21/22628333-' + ($(this).index()+1) + '_w_2.jpg');
		$('#img_u img').eq(0).attr('src', 'http://img3m3.ddimg.cn/2/21/22628333-' + ($(this).index()+1) + '_u_2.jpg');
	})

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>商品详情放大镜效果</title>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
  <body>
    <div class="container">
	<h2>商品详情放大镜效果</h2>
	<div class="magnifierContainer">
		<div class="imgLeft">
			<!-- 中号图片 -->
			<div class="imgMedium" id="imgMedium">
				<!-- 放大镜 -->
				<div class="magnifier" id="magnifier">
					<img src="http://product.dangdang.com/images/zoom_pup.png">
				</div>
				<!-- 图片 -->
				<div class="mediumContainer" id="mediumContainer">
					<img src="http://img3m3.ddimg.cn/2/21/22628333-1_w_2.jpg">
				</div>	
				<div id="zhezhao"></div>			
			</div>
			
			<!-- 缩略图 -->
			<ul class="img_x" id="img_x">
				<li><img src="http://img3m3.ddimg.cn/2/21/22628333-1_x_2.jpg"></li>
				<li><img src="http://img3m3.ddimg.cn/2/21/22628333-2_x_2.jpg"></li>
				<li><img src="http://img3m3.ddimg.cn/2/21/22628333-3_x_2.jpg"></li>
				<li><img src="http://img3m3.ddimg.cn/2/21/22628333-4_x_2.jpg"></li>
				<li><img src="http://img3m3.ddimg.cn/2/21/22628333-5_x_2.jpg"></li>
			</ul>
		</div>
		<div class="imgRight">
			<!-- 大图 -->
			<div class="img_u" id="img_u">
				<img src="http://img3m3.ddimg.cn/2/21/22628333-1_u_2.jpg">
			</div>
		</div>		
	</div>
</div>
  </body>
</html>

* {
		margin: 0;
		padding: 0;
	}
body {
  background: #fff;
}
	ul {
		list-style: none;
	}
	.container {
		width: 850px;
		margin: 50px auto;
		text-align: center;
	}
	.magnifierContainer {
		display: flex;
		margin-top: 30px;
	}
	.imgMedium {
		position: relative;
	}
	.imgLeft .magnifier {
		position: absolute;
		display: none;
    width: 200px;
    height: 200px;
	}
	.mediumContainer {
		width: 350px;
		height: 350px;
		border: 1px solid #eee;
		overflow: hidden;
	}
	#zhezhao {
		width: 350px;
		height: 350px;
		background: transparent;
		position: absolute;
		top: 0;
		border: 1px solid transparent;
	}
	#zhezhao:hover {
		cursor: move;
	}
	.img_x {
		width: 350px;
		height: 77px;
		border: 1px solid #eee;
		margin-top: 20px;
		display: flex;
	}
	.img_x li{
		width: 54px;
		height: 54px;
		border: 2px solid transparent;
		margin: 8px 4px;
		padding: 2px;
	}
	.img_u {
		width: 500px;
		height: 450px;
		border: 1px solid #eee;
		float: left;
		margin-left: 15px;
		overflow: hidden;
		display: none;
	}