原生js实现放大镜效果

话不多说，请看代码

 
 
 
 
 
 
 
 
 html{
 height:100%;
 }
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
 margin: 0;
 padding: 0
 }
 body{
 position: relative;
 min-height:100%;
 font-size:14px;
 font-family: Tahoma, Verdana,"Microsoft Yahei";
 color:#333;
 }
 a{
 text-decoration: none;
 color:#333;
 }
 .header{
 width: 960px;
 padding-top: 15px;
 margin: 0 auto;
 line-height: 30px;
 text-align: right;
 }
 .header a{
 margin: 0 5px;
 }
 .main{
 width:960px;
 margin: 50px auto 0;
 }
 .code{
 border:1px dashed #e2e2e2;
 padding:10px 5px;
 margin-bottom:25px;
 }
 pre {
 font-family: "Microsoft Yahei",Arial,Helvetica;
 white-space: pre-wrap;  
 white-space: -moz-pre-wrap;  
 white-space: -pre-wrap;  
 white-space: -o-pre-wrap;  
 word-wrap: break-word; 
 }
 .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{
 
 }
 .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;
 
 }
 .magnifier-thumb li.active{
 border-color: #f40;
 }
 .magnifier-thumb li img{
 max-width: 50px;
 max-height: 50px;
 vertical-align: middle;
 }
 
 


 
 项目地址
 返回首页
 
 
 
 
 

 

 
 
 

 
 
 
 
 
 
 

 不传参数，执行默认参数，鼠标经过预览图切换
 
 
new magnifier("#magnifier1");


 

 event:"click"，点击预览图切换图片，默认"mouseover" 执行默认参数
 
 
new magnifier("#magnifier1",{
 event:"click"
 });
 
 
 
 调用方法：
 
new magnifier(selector,{options});
 
 options参数
 

 

 

 
参数
 
默认值
 
说明
 
 
 

 

 
event
 
"mouseover"
 
可设置鼠标点击"click"
 
 
 
 
 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！