jqzoom源码解读 2

下面是对上一篇之前的部分补充：（可以直接略过）

el打印出来为链接 实质为

Lens(英文名字也即是 透镜的意思 则其方法的作用就会显而易见了)

this.append 也即是在zoomPad上添加zoomPup

这里包括上面选取的元素都没有，这是为什么了 很显然这会和该方法生效的时间有关系的

el.scale.y

 $('<div/>').addClass('zoomPup');

this. node. w = ( parseInt((settings. zoomWidth) / el. scale. x) > smallimage. w ) ? smallimage. w : ( parseInt(settings. zoomWidth / el. scale. x)) ;

也即是表明如果遮罩的高度大于图片的高度则则 遮罩的高度为图片的高度 否者为遮罩的高度

this. node. top = (smallimage. oh -  this. node. h -  2) /  2 ;
console. log( "smallimage.oh : "+smallimage. oh+ " this.node.h : "+ this. node. h) ;
this. node. left = (smallimage. ow -  this. node. w -  2) /  2 ;

至于this.node.top与this.node.lef究竟的作用有点奇怪

setcenter中

this. node. top = (smallimage. oh -  this. node. h -  2) /  2 ;
this. node. left = (smallimage. ow -  this. node. w -  2) /  2 ;

说实际点 就是 图片的高度加上border组成了oh  -遮罩的高度-border

在setposition 中

e.pageX/Y也即是获取鼠标的位置

      接下来是4个判断over的函数 注意此时的鼠标的位置灵活性 肯定是可以小于该参数的 当它正好与边相切的时候也就是正好的完成了 

注意坐标点是从左上角开始的

鼠标往右边滑动的时候是  往显示的是往左边进行滑动的 

stage是相对image来说的

$( '<div/>'). addClass( 'zoomPad') ;

  $("<div/>")表示生成一个div标签 但必须有添加的位置 获得div标签

此时是否需要该标签 待定 但是需要添加类 所以使用上面的方法来说更加好一点

el. zoomPad = $( '<div/>'). addClass( 'zoomPad') ;
img. wrap(el. zoomPad) ;

$( "body"). append( $( "<div></div>")) ;

在调用newjazoom之前获得this 也即是元素结点(1) a

可以看到最先生成的属性在的位置（将obj设置成全局的变量后 输出obj）

输出obj

在el中点开或

imgtitle

bind事件

http://www.w3school.com.cn/jquery/event_bind.asp

     正式开始》

接下来主要讲解extend的分析：

if ($( ". zoomPad " , el). length ==  0) {
    el. zoomPad = $( '<div/>'). addClass( 'zoomPad') ;
    img. wrap(el. zoomPad) ;
}

 如果el下（a）没有zoomPad类则 也即是所有该类的个数为0  则创建一个div且类名额外zoomPad的元素  之后经img放在里面

if ($( ".zoomPup" , el). length ==  0) {
    lens. append() ;

}

如果没有zoomPup则创建  这里用的是lens.append（） 

this. append =  function () {
    $( '.zoomPad' , el). append($( this. node). hide()) ;
    if (settings. zoomType ==  'reverse') {
        this. image =  new  Image() ;
        this. image. src = smallimage. node. src ;  // fires off async
        $( this. node). empty(). append( this. image) ;
    }
} ;

也即是创建zoomPup添加到zoomPad中     reverse的情况暂时不考虑

 zoomPad 

      -img

      -zoomPup

同样的

if ($( ".zoomWindow" , el). length ==  0) {
    stage. append() ;
}
//creating Preload
if ($( ".zoomPreload" , el). length ==  0) {
    loader. append() ;
}

function  Stage() {
    var $obj =  this ;
    this. node = $( "<div class='zoomWindow'><div class='zoomWrapper'><div class='zoomWrapperTitle'></div><div class='zoomWrapperImage'></div></div></div>") ;

stage

总共有8行现在我们来分析每一行

1. 主要是将zoomWindow zoomWrapper zoomWrappTitle zoomWrapImage等加入zoomPad中

此时的基本层次结构如下

zoomPad

    -img

    -zoomPup

    -zoomWindow

       -zoomWrapper

           -zoomWrapperTitle

            -zoomWraperImage

       

2.添加样式

zoomPad

    -img

    -zoomPup

    -zoomWindow   （position:absoulte  display:none    z-index:5001）

       -zoomWrapper

           -zoomWrapperTitle

            -zoomWraperImage

3.暂时不论

4.

zoomPad

    -img

    -zoomPup

    -zoomWindow   （position:absoulte  display:none    z-index:5001）

       -zoomWrapper   （width :Math,round(setting,.zoomWidth)  borderWidth:thickness）

           -zoomWrapperTitle

            -zoomWraperImage

5

zoomPad

    -img

    -zoomPup

    -zoomWindow   （position:absoulte  display:none    z-index:5001）

       -zoomWrapper   （width :Math,round(setting,.zoomWidth)  borderWidth:thickness）

           -zoomWrapperTitle

            -zoomWraperImage (width:100% ,height: settings.zoomHeight)

6

zoomPad

    -img

    -zoomPup

    -zoomWindow   （position:absoulte  display:none    z-index:5001）

       -zoomWrapper   （width :Math,round(setting,.zoomWidth)  borderWidth:thickness）

           -zoomWrapperTitle (width:100% position:absolute)   hide()

            -zoomWraperImage (width:100% ,height: settings.zoomHeight)

7.

if (settings. title && zoomtitle. length >  0) {
    $( '.zoomWrapperTitle' ,  this. node). html(zoomtitle). show() ;
}

在

zoomPad

    -img

    -zoomPup

    -zoomWindow   （position:absoulte  display:none    z-index:5001）

       -zoomWrapper   （width :Math,round(setting,.zoomWidth)  borderWidth:thickness）

           -zoomWrapperTitle (width:100% position:absolute)   hide()---》zoomtitle  show()

            -zoomWraperImage (width:100% ,height: settings.zoomHeight)

8.

$obj. setposition() ;

此时的obj也即是该stage下的setposition方法

依然对innerzoom的情况暂时不考虑 总体的在5大行

加起来一个意思也即是对其样式 left top进行了设置

stage:

this.node.leftpos

this.node.toppos

回到create中 stage.append    添加了zoomWindow等一大类的东西在里面  并设置了其left和top为0

function  Loader() {
    var $obj =  this ;
    this. append =  function () {
        this. node = $( '<div/>'). addClass( 'zoomPreload'). css( 'visibility' ,  'hidden'). html(settings. preloadText) ;
        $( '.zoomPad' , el). append( this. node) ;
    } ;

接下来为loader.append()

 也即是添加了zoomPreload 

zoomPad

    -img

    -zoomPup

    -zoomWindow   （position:absoulte  display:none    z-index:5001）

        -zoomWrapper   （width :Math,round(setting,.zoomWidth)  borderWidth:thickness）

            -zoomWrapperTitle (width:100% position:absolute)   hide()---》zoomtitle  show()

             -zoomWraperImage (width:100% ,height: settings.zoomHeight)

      -zoomPreload   (visibility:hidden   html setting.preloadText)

 

preloadText:  'Loading zoom' ,

接下来：

if (settings. preloadImages || settings. zoomType ==  'drag' || settings. alwaysOn) {
    obj. load() ;
}

default中默认如下：

zoomType:  'standard' ,

preloadImages:  true ,

alwaysOn:  false ,

也即是默认情况下为true,主要精力将放在load函数中

load:  function () {
    if (el. largeimageloaded ==  false && el. largeimageloading ==  false) {
        var url = $(el). attr( 'href') ;
        el. largeimageloading =  true ;
        largeimage. loadimage(url) ;
    }
} ,

el. largeimageloading =  false ;  //tell us if large image is loading
el. largeimageloaded =  false ;  //tell us if large image is loaded

默认会执行

代码中获得大图片的链接 加载图片 更改zoomloading 为true

largeimage. loadimage(url) ;

function  Largeimage() {
    var $obj =  this ;
    this. node =  new  Image() ;
    this. loadimage =  function ( url) {
        //showing preload
        loader. show() ;
        this. url =  url ;
        this. node. style. position =  'absolute' ;
        this. node. style. border =  '0px' ;
        this. node. style. display =  'none' ;
        this. node. style. left =  '-5000px' ;
        this. node. style. top =  '0px' ;
        document. body. appendChild( this. node) ;
        this. node. src =  url ;  // fires off async
    } ;

其中有

loader. show() ;

this. show =  function () {
    this. node. top = (smallimage. oh -  this. node. height()) /  2 ;
    this. node. left = (smallimage. ow -  this. node. width()) /  2 ;
    //setting position
    this. node. css({
        top:  this. node. top ,
        left:  this. node. left ,
        position:  'absolute' ,
        visibility:  'visible'
    }) ;
} ;

设置zoomPreload的位置（大约在小图片中间的位置）

然后show()也即是其字体会显示

largeimage

this.url

this.node.style.position    absolute  

this.node.style.border          0

this.nonde.style.display        

this.nonde.style.left

this.nonde.style.top

注意此时在largeimage中的onload中在图片加载完后会触发

this. node.onload =  function () {
    //fetching data
    $obj. fetchdata() ;
    loader. hide() ;
    el. largeimageloading =  false ;
    el. largeimageloaded =  true ;
    if (settings. zoomType ==  'drag' || settings. alwaysOn) {
        lens. show() ;
        stage. show() ;
        lens. setcenter() ;
    }
} ;

$obj. fetchdata() ;

也即是在largeimage中的该函数

        

this. fetchdata =  function () {
    var image = $( this. node) ;
    var scale = {} ;
    this. node. style. display =  'block' ;
    $obj. w = image. width() ;
    $obj. h = image. height() ;
    $obj. pos = image. offset() ;
    $obj. pos. l = image. offset(). left ;
    $obj. pos. t = image. offset(). top ;
    $obj. pos. r = $obj. w + $obj. pos. l ;
    $obj. pos. b = $obj. h + $obj. pos. t ;
    scale. x = ($obj. w / smallimage. w) ;
    scale. y = ($obj. h / smallimage. h) ;
    el. scale = scale ;
    document. body. removeChild( this. node) ;
    $( '.zoomWrapperImage' , el). empty(). append( this. node) ;
    //setting lens dimensions;
    lens. setdimensions() ;
} ;

以上均为获取大图片的一些参数

scale. x = ($obj. w / smallimage. w) ;
scale. y = ($obj. h / smallimage. h) ;

缩放比例如上

$( '.zoomWrapperImage' , el). empty(). append( this. node) ;

在zoomWrapperImage上添加上该节点，在body上移除该节点 主要是为了加载图片的方便（放在body）

lens. setdimensions() ;

也即是设置zoomPup的样式

 当图片大于300px(width/Height)的时候，以小图片的宽高为基准  否则以300px为基准，因为之前会传入option参数在使用该插件的时候 可以自己设置

this. node. css({
    top:  0 ,
    left:  0 ,
    width:  this. node. w +  'px' ,
    height:  this. node. h +  'px' ,
    position:  'absolute' ,
    display:  'none' ,
    borderWidth:  1 +  'px'
}) ;

也即是将遮罩的大小位置进行的设定

 回到 perLoader已做完（onload）此时 loader.hide()

el. largeimageloading =  false ;
el. largeimageloaded =  true ;

设置loading与loaded

if (settings. zoomType ==  'drag' || settings. alwaysOn) {
    lens. show() ;
    stage. show() ;
    lens. setcenter() ;
}

alwaysOn:  false ,

也即是默认情况下不会，暂时放下

综合上也即是大图片的样式

-a   (absoulte boder:0 display:none left:-500px top:0)

  -zoomPad

      -img

      -zoomPup

    -zoomWindow   （position:absoulte  display:none    z-index:5001）

         -zoomWrapper   （width :Math,round(setting,.zoomWidth)  borderWidth:thickness）

             -zoomWrapperTitle (width:100% position:absolute)   hide()---》zoomtitle  show()

             -zoomWraperImage (width:100% ,height: settings.zoomHeight)

     -zoomPreload   (visibility:hidden   html setting.preloadText)

然后再document上加入该节点

obj. init() ;

create里面的init()

依然不考虑zoomType的其他情况

$( ".zoomPad" , el). bind( 'mouseenter mouseover' ,  function (event) {
    img. attr( 'title' ,  '') ;
    $(el). attr( 'title' ,  '') ;
    el. zoom_active =  true ;
    //if loaded then activate else load large image
    smallimage. fetchdata() ;
    if (el. largeimageloaded) {
        obj. activate(event) ;
    }  else {
        obj. load() ;
    }
}) ;

在zoomPad绑定鼠标进入/over的事件

img. attr( 'title' ,  '') ;
$(el). attr( 'title' ,  '') ;
el. zoom_active =  true ;

清空title将active设置成true

然后：

smallimage. fetchdata() ;

也即是初始化的时候获得图片的位置

由上面克制preloader的时候上面的loaded参数已经修改

obj. activate(event) ;

activate:  function (e) {
    clearTimeout(el. timer) ;
    //show lens and zoomWindow
    lens. show() ;
    stage. show() ;
} ,

也即是当鼠标进入的时候激活 lens和大图片，之前清除延时

if (settings. zoomType !=  'innerzoom' && (settings. lens || settings. zoomType ==  'drag')) {
    this. node. show() ;
}

也即是显示遮罩

this. show =  function () {
    switch (settings. showEffect) {
        case  'fadein':
            this. node. fadeIn() ;
            this. node. fadeIn(settings. fadeinSpeed ,  function () {}) ;
            break ;
        default:
            this. node. show() ;
            break ;
    }

showEffect:  'show' ,
//show/fadein

默认为show （default） 为fadein的时候 要 fadeinSpeed 

也即是大图片预先加载后均显示，没有则继续加载

$( ".zoomPad" , el). bind( 'mouseleave' ,  function (event) {
    obj. deactivate() ;
}) ;

mouseover--mouseout

mouseenter---mouseleave(两者在于是否穿过元素)

也即是鼠标不在zoomPad的时候

deactivate: function (e) {
    switch (settings.zoomType) {
        case 'drag':
            //nothing or lens.setcenter();
            break;
        default:
            img.attr('title', el.imagetitle);
            $(el).attr('title', el.title);
            if (settings.alwaysOn) {
                lens.setcenter();
            } else {
                stage.hide();
                lens.hide();
            }
            break;
    }
    el.zoom_active = false;
},

this. node. left = (smallimage. ow -  this. node. width()) /  2 ;

也即是表示他要距离左边移动的距离

最后下面的这句的经典的开始 img【0】也即是小图片加载完成

if (img[0].complete) {
    //fetching data from sallimage if was previously loaded
    smallimage.fetchdata();
    if ($(".zoomPad", el).length == 0) obj.create();
}

文章只是总体略读了该插件,，有很多不足之处 ，对于平移的细节等以后将陆续更新！

YcUstc