- 浏览: 59499 次
- 性别:
- 来自: 顺德
最新评论
-
liuxf1122:
不支持最新的IE9、10和11!修改了也不行,不知如何是好啊! ...
JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布 -
gongyeye:
$$E.addEvent( this._container, ...
JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布 -
kingliu:
很好,很强大,学习了
JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布 -
lwkjob:
非常强大谢谢
图片延迟加载(按需加载)效果 -
zxh277100963:
判断ie版本 错误,我明细是IE8的判断出来是IE7
JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布
上一篇ImageZoom已经对图片放大效果做了详细的分析,这次在ImageZoom的基础上进行扩展,实现更多的效果。
主要扩展了原图和显示框的展示模式,有以下几种模式:
"follow" 跟随模式:显示框能跟随鼠标移动的效果;
"handle" 拖柄模式:原图上有一个拖柄来标记显示范围;
"cropper" 切割模式:原图用不透明的来标记显示范围,其他部分用半透明显示;
"handle-cropper" 拖柄切割模式:拖柄模式和切割模式的混合版,同时用透明度和拖柄来标记显示范围。
当然更多的扩展等待你的想象力来发掘。
兼容:ie6/7/8, firefox 3.6.2, opera 10.51, safari 4.0.4, chrome 4.1
程序说明
【扩展模式】
上次ImagesLazyLoad使用了继承做扩展,这次用插件的形式来做扩展。
先看看基础模式,这些模式是保存在ImageZoom._MODE中的,类似这样的结构:
ImageZoom._MODE = {
模式名: {
options: {
...
},
methods: {
init: function() {
...
},
...
}
},
...
}
其中模式名就是基础模式的名字,options是可选参数扩展,methods是程序结构的扩展。
基础模式包含"follow", "handle"和"cropper"模式,后面再详细介绍。
methods包含要扩展的钩子程序,是扩展的主要部分。
ps:这里说的模式不是“设计模式”里面的模式。
扩展需要在程序初始化时进行,要放在_initialize程序之前执行。
为了不影响原程序的结构,这里用织入法在_initialize之前插入一段程序:
ImageZoom.prototype._initialize = (function(){
var init = ImageZoom.prototype._initialize,
...;
return function(){
...
init.apply( this, arguments );
}
})();
原理就是先保存原来的函数,插入一段程序组成新函数,然后重新替换原来的函数。
考虑到组合基础模式的情况,使用了一个对象保存真正使用的模式:
mode = ImageZoom._MODE,
modes = {
"follow": [ mode.follow ],
"handle": [ mode.handle ],
"cropper": [ mode.cropper ],
"handle-cropper": [ mode.handle, mode.cropper ]
};
可以看到"handle-cropper"模式其实就是"handle"和"cropper"的组合模式。
插入的程序的主要任务是根据设定好的基础模式,进行扩展:
var options = arguments[2];
if ( options && options.mode && modes[ options.mode ] ) {
$$A.forEach( modes[ options.mode ], function( mode ){
$$.extend( options, mode.options, false );
$$A.forEach( mode.methods, function( method, name ){
$$CE.addEvent( this, name, method );
}, this );
}, this );
}
首先扩展options可选参数对象,由于可选参数是第三个参数,所以用arguments[2]获取。
extend的第三个参数设为false,说明不重写相同属性,即保留自定义的属性值。
然后把methods里面的方法作为钩子函数逐个添加到程序中。
methods可以包含init, load, start, repair, move, end, dispose这几个方法,分别对应ImageZoom中初始化、加载、开始、修正、移动、结束和销毁事件。
在扩展时,不同的事件执行不同的任务:
init初始化函数:用来设置扩展需要的属性,注意这些属性不要跟ImageZoom本身的属性冲突了,即重名。
load加载函数:图片加载完成,相关参数也设置完成,主要做执行放大效果前的准备工作。
start开始函数:触发放大效果时执行的。
repair修正函数:用于修正大图定位的坐标值。
move移动函数:触发放大效果后,鼠标移动时执行的。
end结束函数就:结束放大效果时执行的。
dispose销毁函数:在移除程序时清理程序的。
ps:具体位置参考ImageZoom中使用$$CE.fireEvent的部分。
可以看到这里用了织入法(weave)和钩子法(hook)对程序做扩展。
织入法是一种aop,可以在不改变原程序的基础上进行扩展,但只能在函数前面或后面加入程序。
而钩子法必须在原程序中设置好对应钩子才能配合使用,但位置相对灵活。
【跟随模式】
在"follow"跟随模式中,进行放大时,显示框会跟随鼠标移动,就像拿着放大镜看的效果。
首先显示框要绝对定位,要实现显示框跟随鼠标移动,只要在move中设置对应的left/top就行了:
var style = this._viewer.style;
style.left = e.pageX - this._repairFollowLeft + "px";
style.top = e.pageY - this._repairFollowTop + "px";
其中pageX/pageY是鼠标当前的坐标,_repairFollowLeft/_repairFollowTop是坐标的修正参数。
修正参数是在load中设置的,如果显示框隐藏的话,用上一篇获取显示范围的方法获取参数:
if ( !viewer.offsetWidth ) {
styles = { display: style.display, visibility: style.visibility };
$$D.setStyle( viewer, { display: "block", visibility: "hidden" });
}
...
if ( styles ) { $$D.setStyle( viewer, styles ); }
为了跟随时,让鼠标固定在显示框中心位置,先根据显示框的offsetWidth/offsetHeight修正参数:
this._repairFollowLeft = viewer.offsetWidth / 2;
this._repairFollowTop = viewer.offsetHeight / 2;
如果显示框的offsetParent不是body,还需要根据offsetParent修正坐标:
if ( !/BODY|HTML/.test( viewer.offsetParent.nodeName ) ) {
var parent = viewer.offsetParent, rect = $$D.rect( parent );
this._repairFollowLeft += rect.left + parent.clientLeft;
this._repairFollowTop += rect.top + parent.clientTop;
}
ps:在Maxthon测试时发现body子元素的offsetParent不是body而是html。
为了在移除程序后,能恢复显示框的样式,在load程序中做了样式的备份:
var viewer = this._viewer, style = viewer.style, styles;
this._stylesFollow = {
left: style.left, top: style.top, position: style.position
};
并在dispose中恢复:
$$D.setStyle( this._viewer, this._stylesFollow );
现在已经达到了基本的效果,但由于大图移动范围的限制,当鼠标移动到接近边界时,大图就卡住不会动了。
为了实现在鼠标移动时,大图会持续变化的效果,在repair中修正了移动坐标:
pos.left = ( viewerWidth / 2 - pos.left ) * ( viewerWidth / zoom.width - 1 );
pos.top = ( viewerHeight / 2 - pos.top ) * ( viewerHeight / zoom.height - 1 );
原理稍有些复杂,以水平坐标为例,先看下图:
大方框代表大图对象,小方框代表显示框。
当前位置是根据鼠标坐标得到的实际显示的位置,目标位置想要实现效果的位置。
有一些物理或几何知识应该明白这个等式:x / y = m / n
可以推出:y = x * n / m = x * ( zoom.width - viewerWidth ) / zoom.height
x当前坐标可以通过pos.left来得到:x = viewerWidth / 2 - pos.left
最后得到:left = -y = ( viewerWidth / 2 - pos.left ) * ( viewerWidth / zoom.width - 1 )
垂直坐标也差不多。
【拖柄模式】
拖柄是一个层,在原图上面,用来表示显示范围在原图的位置和范围。
显示范围可以根据_rangeWidth/_rangeHeight获取。
至于位置的指定可以根据鼠标坐标或大图定位坐标来设置。
如果鼠标坐标的话还必须做其他处理,例如范围控制,而根据大图定位坐标相对就方便准确得多,程序也是用后面一个方法。
首先在init定义一个_handle拖柄对象:
var handle = $$( this.options.handle );
if ( !handle ) {
var body = document.body;
handle = body.insertBefore(this._viewer.cloneNode(false), body.childNodes[0]);
handle.id = "";
handle["_createbyhandle"] = true;
}
$$D.setStyle( handle, { padding: 0, margin: 0, display: "none" } );
如果没有自定义拖柄对象,会复制显示框作为拖柄对象。
对于自动生成的拖柄对象,会添加"_createbyhandle"属性作标记,方便在dispose中移除。
在load时,设置拖柄样式:
$$D.setStyle( handle, {
position: "absolute",
width: this._rangeWidth + "px",
height: this._rangeHeight + "px",
display: "block",
visibility: "hidden"
});
绝对定位是必须的,并根据_rangeWidth/_rangeHeight设置尺寸。
设置display和visibility是为了下面获取参数。
先根据原图坐标获取修正参数:
this._repairHandleLeft = rect.left + this._repairLeft - handle.clientLeft;
this._repairHandleTop = rect.top + this._repairTop - handle.clientTop;
和跟随模式类似,也要做offsetParent定位的修正:
if ( handle.offsetParent.nodeName.toUpperCase() != "BODY" ) {
var parent = handle.offsetParent, rect = $$D.rect( parent );
this._repairHandleLeft -= rect.left + parent.clientLeft;
this._repairHandleTop -= rect.top + parent.clientTop;
}
然后重新隐藏:
$$D.setStyle( handle, { display: "none", visibility: "visible" });
在start时,显示拖柄对象。
在move时,根据大图定位坐标设置拖柄定位:
var style = this._handle.style, scale = this._scale;
style.left = Math.ceil( this._repairHandleLeft - x / scale ) + "px";
style.top = Math.ceil( this._repairHandleTop - y / scale ) + "px";
在end时,隐藏拖柄对象。
【切割模式】
“切割”就是选择的部分全透明,其他部分半透明的效果。
主要通过clip来实现,具体原理可以看图片切割效果。
为了实现切割效果,需要在init中新建一个_cropper切割层:
var body = document.body,
cropper = body.insertBefore(document.createElement("img"), body.childNodes[0]);
cropper.style.display = "none";
并在load中设置这个切割层:
cropper.src = image.src;
cropper.width = image.width;
cropper.height = image.height;
$$D.setStyle( cropper, {
position: "absolute",
left: rect.left + this._repairLeft + "px",
top: rect.top + this._repairTop + "px"
});
差不多是复制一个原图对象,并且绝对定位到原图对象上面。
在start时,显示切割层,并根据透明度设置原图为半透明状态。
在move时,根据大图移动的坐标设置切割层要clip的范围:
var w = this._rangeWidth, h = this._rangeHeight, scale = this._scale;
x = Math.ceil( -x / scale ); y = Math.ceil( -y / scale );
this._cropper.style.clip = "rect(" + y + "px " + (x + w) + "px " + (y + h) + "px " + x + "px)";
在end时,隐藏切割层,并重新设置原图为不透明,来恢复原来的状态。
还要记得在dispose中移除切割层。
使用技巧
需要扩展的效果时才需要添加这个扩展程序。
可自行对ImageZoom._MODE进行扩展,扩展后记得在modes添加对应模式。
可以组合多个基础模式同时使用,具体参考"handle-cropper"模式。
使用说明
使用方法跟ImageZoom差不多,只是多了一个可选参考mode设置显示模式。
使用"handle"模式时,可选参数的"handle"属性可以设置拖柄对象。
使用"cropper"模式时,可选参数的"opacity"属性可以设置透明度。
使用"handle-cropper"模式时,以上两个参数都可以使用。
【扩展模式】
上次ImagesLazyLoad使用了继承做扩展,这次用插件的形式来做扩展。
先看看基础模式,这些模式是保存在ImageZoom._MODE中的,类似这样的结构:
ImageZoom._MODE = {
模式名: {
options: {
...
},
methods: {
init: function() {
...
},
...
}
},
...
}
其中模式名就是基础模式的名字,options是可选参数扩展,methods是程序结构的扩展。
基础模式包含"follow", "handle"和"cropper"模式,后面再详细介绍。
methods包含要扩展的钩子程序,是扩展的主要部分。
ps:这里说的模式不是“设计模式”里面的模式。
扩展需要在程序初始化时进行,要放在_initialize程序之前执行。
为了不影响原程序的结构,这里用织入法在_initialize之前插入一段程序:
ImageZoom.prototype._initialize = (function(){
var init = ImageZoom.prototype._initialize,
...;
return function(){
...
init.apply( this, arguments );
}
})();
原理就是先保存原来的函数,插入一段程序组成新函数,然后重新替换原来的函数。
考虑到组合基础模式的情况,使用了一个对象保存真正使用的模式:
mode = ImageZoom._MODE,
modes = {
"follow": [ mode.follow ],
"handle": [ mode.handle ],
"cropper": [ mode.cropper ],
"handle-cropper": [ mode.handle, mode.cropper ]
};
可以看到"handle-cropper"模式其实就是"handle"和"cropper"的组合模式。
插入的程序的主要任务是根据设定好的基础模式,进行扩展:
var options = arguments[2];
if ( options && options.mode && modes[ options.mode ] ) {
$$A.forEach( modes[ options.mode ], function( mode ){
$$.extend( options, mode.options, false );
$$A.forEach( mode.methods, function( method, name ){
$$CE.addEvent( this, name, method );
}, this );
}, this );
}
首先扩展options可选参数对象,由于可选参数是第三个参数,所以用arguments[2]获取。
extend的第三个参数设为false,说明不重写相同属性,即保留自定义的属性值。
然后把methods里面的方法作为钩子函数逐个添加到程序中。
methods可以包含init, load, start, repair, move, end, dispose这几个方法,分别对应ImageZoom中初始化、加载、开始、修正、移动、结束和销毁事件。
在扩展时,不同的事件执行不同的任务:
init初始化函数:用来设置扩展需要的属性,注意这些属性不要跟ImageZoom本身的属性冲突了,即重名。
load加载函数:图片加载完成,相关参数也设置完成,主要做执行放大效果前的准备工作。
start开始函数:触发放大效果时执行的。
repair修正函数:用于修正大图定位的坐标值。
move移动函数:触发放大效果后,鼠标移动时执行的。
end结束函数就:结束放大效果时执行的。
dispose销毁函数:在移除程序时清理程序的。
ps:具体位置参考ImageZoom中使用$$CE.fireEvent的部分。
可以看到这里用了织入法(weave)和钩子法(hook)对程序做扩展。
织入法是一种aop,可以在不改变原程序的基础上进行扩展,但只能在函数前面或后面加入程序。
而钩子法必须在原程序中设置好对应钩子才能配合使用,但位置相对灵活。
【跟随模式】
在"follow"跟随模式中,进行放大时,显示框会跟随鼠标移动,就像拿着放大镜看的效果。
首先显示框要绝对定位,要实现显示框跟随鼠标移动,只要在move中设置对应的left/top就行了:
var style = this._viewer.style;
style.left = e.pageX - this._repairFollowLeft + "px";
style.top = e.pageY - this._repairFollowTop + "px";
其中pageX/pageY是鼠标当前的坐标,_repairFollowLeft/_repairFollowTop是坐标的修正参数。
修正参数是在load中设置的,如果显示框隐藏的话,用上一篇获取显示范围的方法获取参数:
if ( !viewer.offsetWidth ) {
styles = { display: style.display, visibility: style.visibility };
$$D.setStyle( viewer, { display: "block", visibility: "hidden" });
}
...
if ( styles ) { $$D.setStyle( viewer, styles ); }
为了跟随时,让鼠标固定在显示框中心位置,先根据显示框的offsetWidth/offsetHeight修正参数:
this._repairFollowLeft = viewer.offsetWidth / 2;
this._repairFollowTop = viewer.offsetHeight / 2;
如果显示框的offsetParent不是body,还需要根据offsetParent修正坐标:
if ( !/BODY|HTML/.test( viewer.offsetParent.nodeName ) ) {
var parent = viewer.offsetParent, rect = $$D.rect( parent );
this._repairFollowLeft += rect.left + parent.clientLeft;
this._repairFollowTop += rect.top + parent.clientTop;
}
ps:在Maxthon测试时发现body子元素的offsetParent不是body而是html。
为了在移除程序后,能恢复显示框的样式,在load程序中做了样式的备份:
var viewer = this._viewer, style = viewer.style, styles;
this._stylesFollow = {
left: style.left, top: style.top, position: style.position
};
并在dispose中恢复:
$$D.setStyle( this._viewer, this._stylesFollow );
现在已经达到了基本的效果,但由于大图移动范围的限制,当鼠标移动到接近边界时,大图就卡住不会动了。
为了实现在鼠标移动时,大图会持续变化的效果,在repair中修正了移动坐标:
pos.left = ( viewerWidth / 2 - pos.left ) * ( viewerWidth / zoom.width - 1 );
pos.top = ( viewerHeight / 2 - pos.top ) * ( viewerHeight / zoom.height - 1 );
原理稍有些复杂,以水平坐标为例,先看下图:
大方框代表大图对象,小方框代表显示框。
当前位置是根据鼠标坐标得到的实际显示的位置,目标位置想要实现效果的位置。
有一些物理或几何知识应该明白这个等式:x / y = m / n
可以推出:y = x * n / m = x * ( zoom.width - viewerWidth ) / zoom.height
x当前坐标可以通过pos.left来得到:x = viewerWidth / 2 - pos.left
最后得到:left = -y = ( viewerWidth / 2 - pos.left ) * ( viewerWidth / zoom.width - 1 )
垂直坐标也差不多。
【拖柄模式】
拖柄是一个层,在原图上面,用来表示显示范围在原图的位置和范围。
显示范围可以根据_rangeWidth/_rangeHeight获取。
至于位置的指定可以根据鼠标坐标或大图定位坐标来设置。
如果鼠标坐标的话还必须做其他处理,例如范围控制,而根据大图定位坐标相对就方便准确得多,程序也是用后面一个方法。
首先在init定义一个_handle拖柄对象:
var handle = $$( this.options.handle );
if ( !handle ) {
var body = document.body;
handle = body.insertBefore(this._viewer.cloneNode(false), body.childNodes[0]);
handle.id = "";
handle["_createbyhandle"] = true;
}
$$D.setStyle( handle, { padding: 0, margin: 0, display: "none" } );
如果没有自定义拖柄对象,会复制显示框作为拖柄对象。
对于自动生成的拖柄对象,会添加"_createbyhandle"属性作标记,方便在dispose中移除。
在load时,设置拖柄样式:
$$D.setStyle( handle, {
position: "absolute",
width: this._rangeWidth + "px",
height: this._rangeHeight + "px",
display: "block",
visibility: "hidden"
});
绝对定位是必须的,并根据_rangeWidth/_rangeHeight设置尺寸。
设置display和visibility是为了下面获取参数。
先根据原图坐标获取修正参数:
this._repairHandleLeft = rect.left + this._repairLeft - handle.clientLeft;
this._repairHandleTop = rect.top + this._repairTop - handle.clientTop;
和跟随模式类似,也要做offsetParent定位的修正:
if ( handle.offsetParent.nodeName.toUpperCase() != "BODY" ) {
var parent = handle.offsetParent, rect = $$D.rect( parent );
this._repairHandleLeft -= rect.left + parent.clientLeft;
this._repairHandleTop -= rect.top + parent.clientTop;
}
然后重新隐藏:
$$D.setStyle( handle, { display: "none", visibility: "visible" });
在start时,显示拖柄对象。
在move时,根据大图定位坐标设置拖柄定位:
var style = this._handle.style, scale = this._scale;
style.left = Math.ceil( this._repairHandleLeft - x / scale ) + "px";
style.top = Math.ceil( this._repairHandleTop - y / scale ) + "px";
在end时,隐藏拖柄对象。
【切割模式】
“切割”就是选择的部分全透明,其他部分半透明的效果。
主要通过clip来实现,具体原理可以看图片切割效果。
为了实现切割效果,需要在init中新建一个_cropper切割层:
var body = document.body,
cropper = body.insertBefore(document.createElement("img"), body.childNodes[0]);
cropper.style.display = "none";
并在load中设置这个切割层:
cropper.src = image.src;
cropper.width = image.width;
cropper.height = image.height;
$$D.setStyle( cropper, {
position: "absolute",
left: rect.left + this._repairLeft + "px",
top: rect.top + this._repairTop + "px"
});
差不多是复制一个原图对象,并且绝对定位到原图对象上面。
在start时,显示切割层,并根据透明度设置原图为半透明状态。
在move时,根据大图移动的坐标设置切割层要clip的范围:
var w = this._rangeWidth, h = this._rangeHeight, scale = this._scale;
x = Math.ceil( -x / scale ); y = Math.ceil( -y / scale );
this._cropper.style.clip = "rect(" + y + "px " + (x + w) + "px " + (y + h) + "px " + x + "px)";
在end时,隐藏切割层,并重新设置原图为不透明,来恢复原来的状态。
还要记得在dispose中移除切割层。
使用技巧
需要扩展的效果时才需要添加这个扩展程序。
可自行对ImageZoom._MODE进行扩展,扩展后记得在modes添加对应模式。
可以组合多个基础模式同时使用,具体参考"handle-cropper"模式。
使用说明
使用方法跟ImageZoom差不多,只是多了一个可选参考mode设置显示模式。
使用"handle"模式时,可选参数的"handle"属性可以设置拖柄对象。
使用"cropper"模式时,可选参数的"opacity"属性可以设置透明度。
使用"handle-cropper"模式时,以上两个参数都可以使用。
评论
1 楼
cloudgamer
2010-04-20
ImageZoom._MODE = { //跟随 "follow": { methods: { init: function() { this._stylesFollow = null;//备份样式 this._repairFollowLeft = 0;//修正坐标left this._repairFollowTop = 0;//修正坐标top }, load: function() { var viewer = this._viewer, style = viewer.style, styles; this._stylesFollow = { left: style.left, top: style.top, position: style.position }; viewer.style.position = "absolute"; //获取修正参数 if ( !viewer.offsetWidth ) {//隐藏 styles = { display: style.display, visibility: style.visibility }; $$D.setStyle( viewer, { display: "block", visibility: "hidden" }); } //修正中心位置 this._repairFollowLeft = viewer.offsetWidth / 2; this._repairFollowTop = viewer.offsetHeight / 2; //修正offsetParent位置 if ( !/BODY|HTML/.test( viewer.offsetParent.nodeName ) ) { var parent = viewer.offsetParent, rect = $$D.rect( parent ); this._repairFollowLeft += rect.left + parent.clientLeft; this._repairFollowTop += rect.top + parent.clientTop; } if ( styles ) { $$D.setStyle( viewer, styles ); } }, repair: function(e, pos) { var zoom = this._zoom, viewerWidth = this._viewerWidth, viewerHeight = this._viewerHeight; pos.left = ( viewerWidth / 2 - pos.left ) * ( viewerWidth / zoom.width - 1 ); pos.top = ( viewerHeight / 2 - pos.top ) * ( viewerHeight / zoom.height - 1 ); }, move: function(e) { var style = this._viewer.style; style.left = e.pageX - this._repairFollowLeft + "px"; style.top = e.pageY - this._repairFollowTop + "px"; }, dispose: function() { $$D.setStyle( this._viewer, this._stylesFollow ); } } }, //拖柄 "handle": { options: {//默认值 handle: ""//拖柄对象 }, methods: { init: function() { var handle = $$( this.options.handle ); if ( !handle ) {//没有定义的话用复制显示框代替 var body = document.body; handle = body.insertBefore(this._viewer.cloneNode(false), body.childNodes[0]); handle.id = ""; handle["_createbyhandle"] = true;//生成标识用于移除 } else { var style = handle.style; this._stylesHandle = { left: style.left, top: style.top, position: style.position, display: style.display, visibility: style.visibility, padding: style.padding, margin: style.margin, width: style.width, height: style.height }; } $$D.setStyle( handle, { padding: 0, margin: 0, display: "none" } ); this._handle = handle; this._repairHandleLeft = 0;//修正坐标left this._repairHandleTop = 0;//修正坐标top }, load: function() { var handle = this._handle, rect = this._rect; $$D.setStyle( handle, { position: "absolute", width: this._rangeWidth + "px", height: this._rangeHeight + "px", display: "block", visibility: "hidden" }); //获取修正参数 this._repairHandleLeft = rect.left + this._repairLeft - handle.clientLeft; this._repairHandleTop = rect.top + this._repairTop - handle.clientTop; //修正offsetParent位置 if ( !/BODY|HTML/.test( handle.offsetParent.nodeName ) ) { var parent = handle.offsetParent, rect = $$D.rect( parent ); this._repairHandleLeft -= rect.left + parent.clientLeft; this._repairHandleTop -= rect.top + parent.clientTop; } //隐藏 $$D.setStyle( handle, { display: "none", visibility: "visible" }); }, start: function() { this._handle.style.display = "block"; }, move: function(e, x, y) { var style = this._handle.style, scale = this._scale; style.left = Math.ceil( this._repairHandleLeft - x / scale ) + "px"; style.top = Math.ceil( this._repairHandleTop - y / scale ) + "px"; }, end: function() { this._handle.style.display = "none"; }, dispose: function() { if( "_createbyhandle" in this._handle ){ document.body.removeChild( this._handle ); } else { $$D.setStyle( this._handle, this._stylesHandle ); } this._handle = null; } } }, //切割 "cropper": { options: {//默认值 opacity: .5//透明度 }, methods: { init: function() { var body = document.body, cropper = body.insertBefore(document.createElement("img"), body.childNodes[0]); cropper.style.display = "none"; this._cropper = cropper; this.opacity = this.options.opacity; }, load: function() { var cropper = this._cropper, image = this._image, rect = this._rect; cropper.src = image.src; cropper.width = image.width; cropper.height = image.height; $$D.setStyle( cropper, { position: "absolute", left: rect.left + this._repairLeft + "px", top: rect.top + this._repairTop + "px" }); }, start: function() { this._cropper.style.display = "block"; $$D.setStyle( this._image, "opacity", this.opacity ); }, move: function(e, x, y) { var w = this._rangeWidth, h = this._rangeHeight, scale = this._scale; x = Math.ceil( -x / scale ); y = Math.ceil( -y / scale ); this._cropper.style.clip = "rect(" + y + "px " + (x + w) + "px " + (y + h) + "px " + x + "px)"; }, end: function() { $$D.setStyle( this._image, "opacity", 1 ); this._cropper.style.display = "none"; }, dispose: function() { $$D.setStyle( this._image, "opacity", 1 ); document.body.removeChild( this._cropper ); this._cropper = null; } } } } ImageZoom.prototype._initialize = (function(){ var init = ImageZoom.prototype._initialize, mode = ImageZoom._MODE, modes = { "follow": [ mode.follow ], "handle": [ mode.handle ], "cropper": [ mode.cropper ], "handle-cropper": [ mode.handle, mode.cropper ] }; return function(){ var options = arguments[2]; if ( options && options.mode && modes[ options.mode ] ) { $$A.forEach( modes[ options.mode ], function( mode ){ //扩展options $$.extend( options, mode.options, false ); //扩展钩子 $$A.forEach( mode.methods, function( method, name ){ $$CE.addEvent( this, name, method ); }, this ); }, this ); } init.apply( this, arguments ); } })();
发表评论
-
AlertBox 弹出层(信息提示框)效果
2010-10-11 11:06 1168弹出层就是相对文档或窗口定位的一个层,一般用来显示提示信息、广 ... -
JavaScript 图片3D展示空间(3DRoom)
2010-09-20 09:59 1284一般的平面效果,通过 ... -
ccs3/滤镜/canvas的图片旋转/缩放/翻转变换效果
2010-08-21 13:48 1616以前要实现图片的旋转或翻转,只能用ie的滤镜来实现,虽然can ... -
SlideView 图片滑动(扩展/收缩)展示效果
2010-07-30 08:52 1209滑动展示效果主要用在 ... -
ImageZoom 图片放大效果
2010-04-07 21:03 1239这个效果也叫放大镜效果,最早好像在ppg出现的,之后就有了很多 ... -
图片延迟加载(按需加载)效果
2010-03-11 21:13 2823之前在做一个图片浏览效果时,要看后面的小图必须等到前面的加载完 ... -
Lazyload 延迟加载(缓载)效果
2010-02-22 09:58 1495Lazyload是通过延迟加载 ... -
JavaScript 图片滑动展示效果
2008-05-13 01:34 1692看到jQuery实例:图片展示效果后,我也想拿来试试,但我不太 ... -
JavaScript 图片变换效果(ie only)
2008-05-23 12:02 2270仿照常见的那个图片变换flash做的效果,纯js。不过滤镜变换 ... -
JavaScript 图片滑动切换效果
2008-07-06 01:25 3161序一(08/07/06) 看到alibaba的一个图片切换效 ... -
JavaScript blog式日历控件
2008-08-23 00:25 1028近来要做一个记事本系统,想找一个合适的日历控件,但网上的都是那 ... -
JavaScript Table排序
2008-10-06 08:24 1038程序的实现的是在客户 ... -
JavaScript 日期联动选择器
2008-10-28 10:30 1203一个日期联动选择器, ... -
JavaScript 拖拉缩放效果
2008-12-03 09:07 757拖拉缩放效果,实现通过鼠标拖动来调整层的面积(宽高)大小。例如 ... -
JavaScript 滑动条效果
2008-12-24 08:27 2460这个滑动条(拖动条) ... -
JavaScript Tween算法及缓动效果
2009-01-06 09:17 1131Flash做动画时会用到Tween类,利用它可以做很多动画效果 ... -
JavaScript 颜色梯度和渐变效果
2009-03-11 08:24 1029近来看了Dean的“Convert any colour va ... -
JavaScript Table行定位效果
2009-05-18 14:02 996近来有客户要求用table显示一大串数据,由于滚动后就看不到表 ... -
JavaScript 浮动定位提示效果
2009-07-07 08:23 1088本来想做一个集合浮动 ... -
JavaScript 多级联动浮动菜单 (第二版)
2009-08-10 00:54 1820上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能 ...
相关推荐
ImageZoom 图片放大效果javascriptImageZoom 图片放大效果javascriptImageZoom 图片放大效果javascript
ImageZoom 图片放大镜效果(扩展篇) cloudgamer出品.zip
ImageZoom 图片放大效果! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
jquery.imagezoom图片放大镜插件淘宝店铺商品放大...
满足传统商品展示,比如淘宝、京东的商品图片展示功能。特别是淘宝的商品图片均是用户自己上传的,有宽有窄,为了美观又必须让图片完全居中显示。
上一篇ImageZoom已经对图片放大效果做了详细的分析,这次在ImageZoom的基础上进行扩展,实现更多的效果。
前一阵子看到sohighthesky的图片放大效果,心血来潮自己也写一个看看。 这个程序有以下特点: 1,支持使用原图放大或新图片设置大图; 2,大图完成载入前使用原图放大代替,减少操作等待时间; 3,支持鼠标滚动缩放...
ImageZoom js 图片放大镜效果.zip
前一阵子看到sohighthesky的图片放大效果,心血来潮自己也写一个看看。 这个程序有以下特点: 1,支持使用原图放大或新图片设置大图; 2,大图完成载入前使用原图放大代替,减少操作等待时间; 3,支持鼠标滚动缩放...
使用Jquery插件ImageZoom实现图片点击后放大并可进行上一张下一张欣赏,不用关了以后再点下一张。
关于图片放大镜目前网络上主要有以下三款插件: jquery jqzoom:名气大,鼠标移入移除事件绑定在图片父级元素A上,如果让图片CSS完全居中后有BUG。 kissy imagezoom:淘宝网的放大镜插件,由于基于kissy框架,普及率...
Cloudgamer JavaScript Library ...[ImageZoom 图片放大效果(扩展篇)] () [ImagesLazyLoad 图片延迟加载效果] () [Lazyload 延迟加载效果] () [JavaScript 图片上传预览效果] () [简便无刷新文件上传系统] () Read
imagezoom 模仿淘宝商品局部放大效果 演示地址:
代码作为csdn博客(最简单的实现图片的放大和缩小(就像操作ImageView一样))示例,如有问题博客留言
android开发,图片的放大和缩小的例子