下面是对上一篇之前的部分补充:(可以直接略过)
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 ;
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 ;
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) ;
img. wrap(el. zoomPad) ;
$(
"body").
append(
$(
"<div></div>"))
;
在调用newjazoom之前获得this 也即是元素结点(1) a
可以看到最先生成的属性在的位置(将obj设置成全局的变量后 输出obj)
输出obj
在el中点开或
imgtitle
bind事件
正式开始》
接下来主要讲解extend的分析:
if ($(
".
zoomPad
"
, el).
length ==
0) {
el. zoomPad = $( '<div/>'). addClass( 'zoomPad') ;
img. wrap(el. zoomPad) ;
}
el. zoomPad = $( '<div/>'). addClass( 'zoomPad') ;
img. wrap(el. zoomPad) ;
}
如果el下(a)没有zoomPad类则 也即是所有该类的个数为0 则创建一个div且类名额外zoomPad的元素 之后经img放在里面
if ($(
".zoomPup"
, el).
length ==
0) {
lens. append() ;
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) ;
}
} ;
$( '.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() ;
}
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>") ;
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() ;
}
$( '.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) ;
} ;
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() ;
}
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) ;
}
} ,
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
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
} ;
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'
}) ;
} ;
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() ;
}
} ;
//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() ;
} ;
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) ;
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'
}) ;
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 ;
el. largeimageloaded = true ;
设置loading与loaded
if (settings.
zoomType ==
'drag' || settings.
alwaysOn) {
lens. show() ;
stage. show() ;
lens. setcenter() ;
}
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() ;
}
}) ;
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 ;
$(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() ;
} ,
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 ;
}
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/fadein
默认为show (default) 为fadein的时候 要 fadeinSpeed
也即是大图片预先加载后均显示,没有则继续加载
$(
".zoomPad"
, el).
bind(
'mouseleave'
,
function (event) {
obj. deactivate() ;
}) ;
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