<!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">
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<style>
* {margin: 0;padding: 0;}
.cxbZoom { 200px;height: 350px;margin: 100px;border: 1px solid #ccc;position: relative;}
.cxbZoom .mask { 75px;height: 75px;background: rgba(255, 255, 0, 0.4);position: absolute;top: 0;left: 0;cursor: move;display: none;}
.cxbZoom .small {position: relative;100%;height:100%}
.cxbZoom .small img{100%;}
.cxbZoom .box img {vertical-align: top;}
.cxbZoom .big { 400px;height: 400px;position: absolute;top: 0;left: 360px;border: 1px solid #ff6600;overflow: hidden;display: none;}
.cxbZoom:hover .big { display:block; }
.cxbZoom .big img { position: relative;800px;z-index: 10999;top:0;left:0;}
</style>
</head>
<body>
<div class="cxbZoom" >
<div class="small">
<img src="http://img.mp.itc.cn/upload/20170511/2cc026a202ee4c9e8aa96fee1aaea903_th.jpg" alt="" />
<div class="mask"></div>
</div>
<div class="big"><img src="http://img.mp.itc.cn/upload/20170511/2cc026a202ee4c9e8aa96fee1aaea903_th.jpg" alt="" /></div>
<div >body></html>
