放大镜

访京东的放大镜

by rentj1

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>放大镜</title>
<style> 
img{ vertical-align:bottom;}
.mod_zoom{ overflow:hidden; zoom:1;}
.mod_zoom .p1 { float:left; position:relative; height:350px; width:350px;  margin-right:5px; }
.mod_zoom .p1 .mask{ position:absolute; left:0; top:0; width:175px; height:175px; background-color:#fede4f; opacity:0.5;   display:none;  }
.mod_zoom .p2{ position:relative; width:400px; height:400px; overflow:hidden;  display:none;}
.mod_zoom .p2 .img{ position:absolute; left:0; top:0;}
.mod_zoom .ph{width:100%; height:350px; position:absolute; top:0; left:0;  cursor:crosshair;
/*background-color:red*/
/*如果给它绑定事件处理函数，IE中不设置background-color属性就不触发事件*/ }
</style>
</head>
 
<body>
<div>
<div class="mod_zoom">
<div class="p1" id="p1">
    <img src="http://img14.360buyimg.com/n1/4071/b350e77e-fc74-4173-81b5-dfe54f425ef6.jpg" id="z1" />
    <span class="mask" id="m"></span>
    <span class="ph" id="eventproxy"></span>
</div>
<div class="p2" id="p2">
    <img src="http://img14.360buyimg.com/n0/4071/b350e77e-fc74-4173-81b5-dfe54f425ef6.jpg" class="img" id="z2" />
</div>
</div>
</div>
 
<script> 
 
function PhotoZoomer(elements){
    this.mask = elements.mask; //蒙版
    this.container = elements.container //原图容器
    this.originimg =  elements.originimg; //原图    
    this.eventproxy = elements.eventproxy;
    this.bigContainer = elements.bigContainer; //大图容器
    this.bigimg = elements.bigimg;    //大图        
 
    this.visible = false;
    
    this._bind();
}
 
PhotoZoomer.prototype = {
    
    display: function(style){
            var self = this;
            self.mask.style.display = style;
            self.bigContainer.style.display = style;
    },
    
    //计算放大蒙版位置
    zoom: function(clientX, clientY){
        var self = this,
            //位置比例
            rate = {},        
            //放大蒙版最大活动范围
            maxrange = {
                offsetLeft: self.container.offsetWidth  - self.mask.offsetWidth,
               ...