jqzoom源码解读 2

Posted 2022-12-11 Rank-Bill

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

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