JavaScript圖片放大技術(放大鏡)實作程式碼分享

JavaScript圖片放大技術(放大鏡)實作程式碼分享_javascript技巧

WBOY

發布： 2016-05-16 17:15:16

原創

888 人瀏覽過

>
JavaScript圖片放大技術(放大鏡)實作程式碼分享- www.jb51.net

#放大鏡{
    寬度：342px；
    高度：420px；
    位置：絕對；
    上：100px 尺寸;
邊框：1px 實心#000；
}
#img{
    寬度：342px;
    高度：420px；
}
    高度：420px；
}
130p 000;
    z-index:100;
    位置：絕對；
    背景：#555;
}     z-index:100;
}
樣式>

function getEventObject(W3CEvent) {//事件標準化函數
    return W3CEvent ||視窗.事件;
}
function getPointerPosition(e) {//相容瀏覽器的滑鼠x,y取得函數
    e = e ||）取得事件物件（e||） ;
    var x = e.pageX || (e.clientX(document.documentElement.scrollLeft || document.body.scrollLeft));
    var y = e.pageY || (eclient(document|| documentElement.scrollTop || document.body.scrollTop));

    return { 'x':x,'y':y };
}
function setOpacity(elem,level) {/elem /相容瀏覽器設定透明值
    if(elem.filters) {
        elem.style.filter = 'alpha(opacity=' level * 100 ')'; } style.opacity = level;
    }
}
function css(elem,prop) {   //css設定函數，可輕鬆設定css值，且相容設定透明值
    for(var i incss值，且相容設定透明值
    for(var i incss值prop) {
if(i == 'opacity') {
            setOpacity(elem,prop[i]);         }
    }
    返回elem;
}
var 放大鏡= {
{n.        var m = this.m = magni || {         }

        css(m.img, {
            'position' : 'absolute',
   )'p.                // 原始影像的寬*比例值
            'height' : (m.cont.clientHeight * m.scale) 'px'           )

        css(m.mag,{
            'display' : 'none ',    //m.cont為原始影像,與原始影像等寬
            'height' : m.cont.clientHeight 'px',
        ft' : m.cont.offsetLeft m.cont.offsetWidth 10 'px',//放大框的位置為原始影像的右邊遠10px
            'top' : m.cont.offsetTop 'px'
   var borderWid = m.cont .getElementsByTagName('div')[0].offsetWidth - m.cont.getElementsByTagName('div')[0].clientWidth;      //取得border的寬

     //取得border的寬

     //取得border的寬

   div')[0],{         //m.cont.getElementsByTagName('div')[0]為瀏覽框
                      //開始設定為看不見
            'width' : m.cont.clientWidth / m.scale - borderWid 'px',          //原始圖片的寬/比例值- border的寬度
      p. ,//原始圖片的高/比例值- border的寬度
            'opacity' : 0.5//設定透明度
     m.cont.getElementsByTagName(' img')[0].src;//讓原始影像的src值給予放大影像
        m.cont.style.cursor = 'crosshair';

   ;

    },

    start:function(e){

       all {//16.
            magnifier.createIframe(magnifier.m.img);
       }         this.onmouseout = magnifier.end;
    },

    move:function(e){
        var pos = getPointer .getElementsByTagName('div')[0] .style.display = '';

        css(this.getElementsByTagName('div')[0],{
         offsetTop - parseInt(this.getElementsByTagName('div')[0].style.height) / 2,0),this.clientHeight - this.getElementsByTagName('div')[0].offsetHeight) 'px',
            'left' : Math.min(Math.max(pos.x - this.offsetLeft - parseInt(this.getElementsByTagName('div')[0].style.width) / 2,00),this.Name('div')[0].style.width) / 2,0003. .getElementsByTagName('div')[0].offsetWidth) 'px'            //left=滑鼠x - this.offsetLeft - 瀏覽框寬/2,Math.max與Math.min讓瀏覽框不會超出圖片
})

        magnifier.m.mag.style.display = '';

       Int(this.getElementsByTagName ('div')[0].style.top) * magnifier.m.scale) 'px',
            'left' : - (parseInt(this.getElementsByTagName('divdiv')[0].style.left ) * magnifier.m.scale) 'px'
            })

    },

end:function(e){
this.getElementsByTagName('div')[0].style.display = 'none';
magnifier.removeIframe(magnifier.m.img);        //销毁iframe

magnifier.m.mag.style.display = 'none';
},

createIframe:function(elem){
varlayer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:false;';
elem.parentNode.appendChild(layer);

layer.style.width = elem.offsetWidth 'px';
layer.style.height = elem.offsetHeight 'px';
},

removeIframe:function(elem){
varlayers = elem.parentNode.getElementsByTagName('iframe');
while(layers.length >0){
Layer[0].parentNode.removeChild(layers[0]);
}
}
}
window.onload = function(){
magnifier.init({
cont : document.getElementById('magnifier'),
画像 : document.getElementById('magnifierImg'),
mag : document.getElementById('mag'),
スケール : 3
});
}