话不多说，请看代码
<Meta charset="UTF-8">
放大镜-原生js封装
css-3*/
white-space: -moz-pre-wrap; /*Mozilla,since1999*/
white-space: -pre-wrap; /*Opera4-6*/
white-space: -o-pre-wrap; /*Opera7*/
word-wrap: break-word; /*InternetExplorer5.5+*/
}
.example{
padding-top:40px;
margin-bottom:90px;
}
.example .call{
padding:18px 5px;
background:#f0f5f8;
}
.example h2{
padding-top:20px;
margin-bottom:7px;
}
.example table {
width:100%;
table-layout:fixed;
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #cee1ee;
border-left: 0;
}
.example thead {
border-bottom: 1px solid #cee1ee;
background-color: #e3eef8;
}
.example tr {
line-height: 24px;
font-size: 13px;
}
.example tr:nth-child(2n) {
background-color: #f0f5f8;
}
.example tr th,.example tr td {
border-left: 1px solid #cee1ee;
word-break: break-all;
word-wrap: break-word;
padding:0 10px;
font-weight: normal;
}
.example tr th {
color: #555;
padding-top: 2px;
padding-bottom: 2px;
text-align: left;
}
/*公共*/
.magnifier-Box{
margin-bottom: 15px;
}
.magnifier-container{
width: 400px;
height: 255px;
margin: 50px;
position: relative;
border: 1px solid #ccc;
}
.magnifier-small{
position: relative;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
}
.magnifier-small img{
/*max-width: 100%;
max-height: 100%;*/
}
.magnifier-mark {
position: absolute;
display: block;
width: 400px;
height: 255px;
background-color: #fff;
filter: alpha(opacity:0);
opacity: 0;
z-index: 10;
}
.magnifier-float-Box {
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity:50);
opacity: 0.5;
}
.magnifier-big-Box {
display: none;
position: absolute;
top: 0;
left: 460px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;
}
.magnifier-big-Box img {
position: absolute;
z-index: 5;
}
.magnifier-thumb{}
.magnifier-thumb li{
display: inline-block;
width: 50px;
height: 50px;
vertical-align: middle;
line-height: 50px;
margin-right: 5px;
border: 2px solid #fff;
/*display: table-cell;*/
}
.magnifier-thumb li.active{
border-color: #f40;
}
.magnifier-thumb li img{
max-width: 50px;
max-height: 50px;
vertical-align: middle;
}
Box" id="magnifier1">
