javascript 放大鏡 v1.0 基于Yui2 實(shí)現(xiàn)的放大鏡效果
更新時(shí)間：2010年03月08日 18:00:12 作者：
javascript 放大鏡 v1.0 基于Yui2 實(shí)現(xiàn)的放大鏡效果代碼。
v1.0實(shí)現(xiàn)功能
1 放大倍數(shù)設(shè)置
2 透明度設(shè)置
3 反轉(zhuǎn)特效
4 放大圖片層的大小自定義
5 鼠標(biāo)層的大小自定義
6 ie6下select遮蓋問(wèn)題
7 光標(biāo)樣式自定義
8 zIndex設(shè)置
簡(jiǎn)單初始化方法舉例
復(fù)制代碼 代碼如下:
new flower.init("Demo","mag");
new flower.init("Demo1","mag1",{
max:3,zoomType:false,zoomWidth:200,zoomHeight:200,iframe:true,zIndex:666,cursor:"row-resize"
});
代碼講解
復(fù)制代碼 代碼如下:
defaultConfig={
/**
* 放大鏡的倍數(shù)
* @type Number
*/
max:3,
/**
* *放大鏡鼠標(biāo)移動(dòng)層的透明度
* @type Number
*/
opacity:0.5,
/**顯示效果 false為默認(rèn),true為反色效果
* @type Boolean
*/
zoomType:false,
/**顯示動(dòng)畫(huà)
* @type String
*/
showEffect:'fadein',
/**放大層的寬度
* @type Number
*/
zoomWidth:'auto',
/**放大層的高度
* @type Number
*/
zoomHeight:'auto',
/**鼠標(biāo)層的寬度
* @type Number
*/
tipsWidth:'auto',
/**鼠標(biāo)層的高度
* @type Number
*/
tipsHeight:'auto',
/**iframe遮蓋select
* @type Boolean
*/
iframe:false,
/**iframe zIndex
* @type Number
*/
zIndex:999,
/**光標(biāo)樣式
* @type String
*/
cursor:"auto"
};
組件默認(rèn)的參數(shù)配置,包括放大倍數(shù)，寬度，高度，透明度等的設(shè)置
2 定義屬性
復(fù)制代碼 代碼如下:
namespace.init=function(content,mag,config){
/**
* 原始圖片容器
* @type HTMLElement
*/
this.content=D.get(content);
/**
* 放大圖片容器
* @type HTMLElement
*/
this.mag=D.get(mag);
/**
* 原始圖片
* @type HTMLElement
*/
this.imgsource=this.content.getElementsByTagName("img")[0];
/**
* 放大圖片
* @type HTMLElement
*/
this.img=this.mag.getElementsByTagName("img")[0];
/**
* 鼠標(biāo)layer
* @type HTMLElement
*/
this.tips=this.content.getElementsByTagName("div")[0];
/**
* 配置參數(shù)
* @type this.tipsect
*/
this.config=L.merge(defaultConfig,config||{});
/*初始化*/
this._init();
};
init函數(shù)接受三個(gè)實(shí)參 原圖的容器id,和放大后的圖片容器id和配置參數(shù) (裝firebug的同學(xué)可以看下代碼結(jié)構(gòu))
this.config=L.merge(defaultConfig,config||{});
這句話是后面的對(duì)象的屬性覆蓋前面的對(duì)象的屬性,并返回
如 this.config=L.merge({"a":"aa"},{"a":"bb"});
此時(shí)的this.config.a == "bb"
config||{}
如果config不存在,則返回空的對(duì)象自變量
原型初始化方法
代碼
復(fù)制代碼 代碼如下:
_init:function(){
var self=this;
/*賦值src給大圖*/
this.img.src=this.imgsource.src;
/*get邊框長(zhǎng)度*/
this.borderwidth=this.imgsource.offsetWidth - this.imgsource.clientWidth;
/**
* 設(shè)置大圖片的寬度和高度 (X倍數(shù))
* 設(shè)置大圖容器的寬高和位置
* 設(shè)置鼠標(biāo)跟隨層的寬高和透明度
*/
this.pi=(this.config.zoomWidth!='auto'?this.config.zoomWidth/this.imgsource.offsetWidth:1)
this.pi2=(this.config.zoomHeight!='auto'?this.config.zoomHeight/this.imgsource.offsetHeight:1)
this._css(this.img,{
'position':'absolute',
'width':(this.config.zoomWidth!='auto' ?this.imgsource.offsetWidth*this.config.max*this.pi:this.imgsource.offsetWidth*this.config.max)+"px",
'height':(this.config.zoomHeight!='auto' ?this.imgsource.offsetHeight*this.config.max*this.pi2:this.imgsource.offsetHeight*this.config.max)+"px"
})._css(this.mag,{
'width':(this.config.zoomWidth!='auto' ? this.config.zoomWidth:this.imgsource.offsetWidth)+"px",
'height':(this.config.zoomHeight!='auto'?this.config.zoomHeight:this.imgsource.offsetHeight)+"px",
'left':D.getX(this.content)+this.imgsource.offsetWidth+10+"px",
'top':this.content.offsetTop+"px",
'position' : 'absolute',
"zIndex":this.config.zIndex
})._css(this.tips,{
'display':'',
'width':(this.config.tipsWidth!='auto' ? this.config.tipsWidth: parseInt(this.imgsource.offsetWidth / this.config.max)- this.borderwidth)+"px",
'height' : (this.config.tipsHeight!='auto' ? this.config.tipsHeight: parseInt(this.imgsource.offsetHeight / this.config.max) - this.borderwidth )+ 'px',
'opacity' : this.config.opacity
})
E.on(this.content,'mousemove',function(e){
self._css(self.mag,{"display":"block"})._css(self.tips,{"display":"block"})._move(e,self.tips)
})
E.on(this.content,'mouseout',function(e){
self._css(self.tips,{"display":"none"})._css(self.mag,{"display":"none"});
})
!!this.config.zoomType && E.on(self.tips,'mouseout',function(e){
self._css(self.imgsource,{"opacity":1});
self.tips.getElementsByTagName("img")[0] && self.tips.removeChild(self.tips.getElementsByTagName("img")[0]);
})
if(ie6 && !!this.config.iframe){
this._createIframe(this.mag);
}
D.setStyle(this.content,"cursor",this.config.cursor);
},
組件的初始化原代碼
默認(rèn)鼠標(biāo)跟隨的層和大圖是隱藏的
1.把圖片的鏈接賦值給將要放大顯示的圖片。
2. 如有自定義zoomWidth或zoomHeight大小的時(shí)候，設(shè)置 this.pi 寬比 和this.pi2 高比 (為與實(shí)際圖片大小間的比值)
3.設(shè)置大圖的寬度和高度
4. 設(shè)置大圖容器的寬高和位置
5.設(shè)置鼠標(biāo)層的位置和寬高和透明度
6 給原圖容器增加mousemove事件
7. 給原圖容器增加mouseout事件
8 反色特效后,還原透明度，并刪除用來(lái)實(shí)現(xiàn)效果的 Dom (在鼠標(biāo)層結(jié)構(gòu)內(nèi)用appendChild一個(gè)img元素)
9 ie6 創(chuàng)建iframe 用來(lái)遮擋的select。(默認(rèn)情況下在無(wú)iframe的時(shí)候,ie6會(huì)被select擋住，無(wú)法用zIndex來(lái)修正 )
10 設(shè)置光標(biāo)樣式
style設(shè)置的方法
復(fù)制代碼 代碼如下:
_css:function(el,json){
for(var s in json){
D.setStyle(el,s,json[s]);
}
return this;
},
Yui有提供自己的 設(shè)置Dom樣式的方法 D.setStyle(dom,style屬性名,屬性的值);
用 for (var s in json) 來(lái)遍歷 json對(duì)象的所有屬性
return this; 常用的鏈?zhǔn)秸{(diào)用寫(xiě)法 // this._css(/**/)._css(/**/) ._css(/**/) ……
核心mousemove事件代碼
復(fù)制代碼 代碼如下:
_move:function(e,tips){
var point=E.getXY(e);
/**
* 提示層位置
* 大圖顯示位置
*/
this._css(tips,{
'top' : Math.min(Math.max(point[1] - this.content.offsetTop-parseInt(tips.offsetHeight)/2 ,0),this.content.offsetHeight - tips.offsetHeight) + 'px',
'left' : Math.min(Math.max(point[0] - this.content.offsetLeft-parseInt(tips.offsetWidth)/2 ,0),this.content.offsetWidth - tips.offsetWidth) + 'px'
})._css(this.img,{
'top':-(parseInt(tips.style.top) * this.config.max *this.pi2) + 'px',
'left' : - (parseInt(tips.style.left) * this.config.max *this.pi) + 'px'
});
/**
* 反色效果
*/
if(!!this.config.zoomType){
if(!tips.getElementsByTagName("img").length){
var imgs=document.createElement("img");
imgs.id='temp';
imgs.src=this.imgsource.src;
this._css(imgs,{
'width':this.imgsource.offsetWidth+"px",
'height':this.imgsource.offsetHeight+"px",
'position':'absolute'
});
tips.appendChild(imgs);
this.imgs=imgs;
}
this._css(this.imgsource,{
"opacity":0.2
})._css(this.tips,{
"opacity":1,
"visibility":"visible"
})._css(D.get("temp"),{
'top':-(parseInt(tips.style.top))+"px",
'left':-(parseInt(tips.style.left))+"px"
})
}
},
提示層位置的移動(dòng) 鼠標(biāo)位置X軸 - this.offsetLeft - 鼠標(biāo)框?qū)挾?2
并用Math.max和Math.min，不讓鼠標(biāo)框超出tuxiang
大圖位置的移動(dòng)=小圖的位置 X 放大倍數(shù) X 寬比(默認(rèn)為1)
反色效果是在jquery的一個(gè)插件上看到的 沒(méi)有看他的代碼 看了下他dom結(jié)構(gòu) 應(yīng)該和我這種實(shí)現(xiàn)方式是一樣的
設(shè)置原圖的透明度為0.2 這樣就變灰色了 然后設(shè)置鼠標(biāo)層透明為1,也就是不透明.層內(nèi)是一個(gè)圖片 和 imgsource的地址是一樣的
這圖片的父元素position也是absolute,所以我們要實(shí)時(shí)設(shè)置top和left值來(lái)定位鼠標(biāo)層的圖片
創(chuàng)建iframe
復(fù)制代碼 代碼如下:
_createIframe:function(el){
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:false;';
el.appendChild(layer);
this._css(layer,{
"width":(this.config.zoomWidth!='auto' ? this.config.zoomWidth:this.imgsource.offsetWidth)+"px",
"height":(this.config.zoomHeight!='auto'?this.config.zoomHeight:this.imgsource.offsetHeight)+"px",
"zIndex":this.config.zIndex
})
}
iframe元素的寬高和zIndex的設(shè)置，配置參數(shù)設(shè)置iframe:true并在ie6下 才會(huì)創(chuàng)建,在其他瀏覽器下設(shè)置true也不會(huì)創(chuàng)建，因?yàn)闆](méi)有必要
代碼改進(jìn)中
1 增加特效的插件機(jī)制
2 優(yōu)化設(shè)定寬高值表達(dá)式的代碼 感覺(jué)太長(zhǎng)太臃腫
3 增加圖片預(yù)載
4 增加回調(diào)函數(shù)接口
5 增加className，讓用戶(hù)可自定義
6 等等(...)
地址打包下載 :放大鏡
您可能感興趣的文章:
- 用javascript制作放大鏡放大圖片
- 奇妙的Javascript圖片放大鏡
- JavaScript 圖片放大鏡（可拖放、縮放效果）
- JavaScript 圖片切割效果(放大鏡)
- javascript 放大鏡效果js組件 qsoft.PopBigImage.v0.35 加入了chrome支持
- JavaScript圖片放大鏡效果代碼[代碼比較簡(jiǎn)單]
- JavaScript 放大鏡 放大倍率和視窗尺寸
- JavaScript 放大鏡 移動(dòng)鏡片效果代碼
- JavaScript圖片放大技術(shù)(放大鏡)實(shí)現(xiàn)代碼分享
- javascript放大鏡效果的簡(jiǎn)單實(shí)現(xiàn)
- 使用純javascript實(shí)現(xiàn)放大鏡效果
相關(guān)文章
Ext grid 添加右擊菜單實(shí)現(xiàn)代碼。2009-11-11
學(xué)習(xí)YUI.Ext 第四天--對(duì)話框Dialog的使用
學(xué)習(xí)YUI.Ext 第四天--對(duì)話框Dialog的使用...2007-03-03
解決extjs在firefox中關(guān)閉窗口再打開(kāi)后iframe中js函數(shù)訪問(wèn)不到的問(wèn)題
最近做ext時(shí)遇到一個(gè)問(wèn)題，在firefox中瀏覽ext應(yīng)用，加載后第一次打開(kāi)一個(gè)嵌入iframe的Window時(shí)，可以直接通過(guò)js代碼來(lái)執(zhí)行 iframe中的js函數(shù)，但是如果將窗口關(guān)閉后重新再打開(kāi)，將會(huì)拋出異常，說(shuō)是funcName is not a function2008-11-11
學(xué)習(xí)YUI.Ext 第六天--關(guān)于樹(shù)TreePanel(Part 2異步獲取節(jié)點(diǎn))
學(xué)習(xí)YUI.Ext 第六天--關(guān)于樹(shù)TreePanel(Part 2異步獲取節(jié)點(diǎn))...2007-03-03
ext checkboxgroup 回填數(shù)據(jù)解決
解決checkboxgroup回填數(shù)據(jù)問(wèn)題的實(shí)現(xiàn)代碼2009-08-08
ext form 表單提交數(shù)據(jù)的方法小結(jié)
Ext 表單提交數(shù)據(jù)的三種方法小結(jié)，方便利用ext提交數(shù)據(jù)的朋友2008-08-08
ext 列表頁(yè)面關(guān)于多行查詢(xún)的辦法
在列表頁(yè)面中遇到不少查詢(xún)問(wèn)題，那么查詢(xún)的字段由于類(lèi)型很多，所以導(dǎo)致了需要多行顯示查詢(xún)列，查詢(xún)列采用toolbar2010-03-03
Ext面向?qū)ο箝_(kāi)發(fā)實(shí)踐（續(xù)）
我的上一篇文章《Ext面向?qū)ο箝_(kāi)發(fā)實(shí)踐》中簡(jiǎn)述了如何編寫(xiě)一個(gè)面向?qū)ο蟮臄?shù)據(jù)維護(hù)小程序，但這一些都是基于一個(gè)客戶(hù)端數(shù)據(jù)，即用戶(hù)一旦刷新頁(yè)面，所有的操作都將丟失，現(xiàn)在我們就接著上一篇文章來(lái)繼續(xù)講一下如何對(duì)數(shù)據(jù)表進(jìn)行增、刪、改、查操作。2008-11-11
當(dāng)一個(gè)列用render渲染的時(shí)候，如果列寬度不夠，內(nèi)容多出的部分會(huì)被隱藏，無(wú)法顯示。這時(shí)需要一個(gè)鼠標(biāo)滑過(guò)提示全部?jī)?nèi)容的tip功能。2008-12-12
學(xué)習(xí)YUI.Ext 第三天...2007-03-03