javascript 확대경 v 1.0 Yui 2 기반 확대경 효과

v 1.0 구현 기능 1 확대 배수 설정 2 투명도 설정 3 반전 효과 4 확대 그림 층 의 크기 사용자 정의 5 마우스 층 의 크기 사용자 정의 6 ie6 에서 select 커버 문제 7 커서 스타일 사용자 정의 8 zIndex 설정 간단 한 초기 화 방법 예 를 들 어

 
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" 
}); 

코드 설명

 
defaultConfig={ 
/** 
*        
* @type Number 
*/ 
max:3, 
/** 
* *             
* @type Number 
*/ 
opacity:0.5, 
/**     false   ,true      
* @type Boolean 
*/ 
zoomType:false, 
/**     
* @type String 
*/ 
showEffect:'fadein', 
/**       
* @type Number 
*/ 
zoomWidth:'auto', 
/**       
* @type Number 
*/ 
zoomHeight:'auto', 
/**       
* @type Number 
*/ 
tipsWidth:'auto', 
/**       
* @type Number 
*/ 
tipsHeight:'auto', 
/**iframe  select 
* @type Boolean 
*/ 
iframe:false, 
/**iframe zIndex 
* @type Number 
*/ 
zIndex:999, 
/**     
* @type String 
*/ 
cursor:"auto" 
}; 

구성 요소 의 기본 매개 변수 설정 은 확대 배수,너비,높이 를 포함한다.투명도 등의 설정 2 정의 속성

 
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]; 
/** 
*   layer 
* @type HTMLElement 
*/ 
this.tips=this.content.getElementsByTagName("div")[0]; 
/** 
*      
* @type this.tipsect 
*/ 
this.config=L.merge(defaultConfig,config||{}); 
/*   */ 
this._init(); 
}; 

init 함 수 는 실제 그림 의 용기 id 세 개 와 확 대 된 그림 용기 id 와 설정 매개 변수(firebug 를 담 은 학생 은 코드 구 조 를 볼 수 있 습 니 다)this.config=L.merge(default Config,config|{})를 받 습 니 다.이 말 은 뒤의 대상 의 속성 이 앞의 대상 의 속성 을 덮어 쓰 고 this.config=L.merge({"a":"aa"},{"a":"bb"})와 같은 것 을 되 돌려 줍 니 다.이 때 this.config.a=="bb"config|{}config 가 존재 하지 않 으 면 빈 대상 의 독립 변수 프로 토 타 입 초기 화 방법 코드 를 되 돌려 줍 니 다

 
_init:function(){ 
var self=this; 
/*  src   */ 
this.img.src=this.imgsource.src; 
/*get    */ 
this.borderwidth=this.imgsource.offsetWidth - this.imgsource.clientWidth; 
/** 
*             (X  ) 
*              
*                
*/ 
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); 
}, 

구성 요소 의 초기 화 원본 코드 는 기본 마우스 가 따 르 는 층 과 큰 그림 이 숨겨 져 있 습 니 다.1.그림 의 링크 값 을 확대 할 그림 에 부여 합 니 다.2.zoomWidth 나 zoomHeight 크기 를 사용자 정의 할 때,this.pi 너비 와 this.pi2 높이(실제 그림 크기 와 의 비례 값)를 설정 합 니 다.3.큰 그림 의 너비 와 높이 를 설정 합 니 다.효 과 를 실현 하 는 Dom(마우스 계층 구조 에서 appendChild 하나의 img 요소 로)9 ie6 를 삭제 하고 iframe 을 만들어 가 리 는 select 를 만 듭 니 다.(기본 적 인 상황 에서 iframe 이 없 을 때 ie6 는 select 에 의 해 가 려 져 zIndex 로 수정 할 수 없습니다)10 커서 스타일 style 설정 방법

 
_css:function(el,json){ 
for(var s in json){ 
D.setStyle(el,s,json[s]); 
} 
return this; 
}, 

Yui 는 자신의 Dom 스타일 설정 방법 D.setStyle(dom,style 속성 명,속성의 값)을 제공 합 니 다.for(var s in json)로 json 대상 의 모든 속성 return this 를 옮 겨 다 니 기;자주 사용 하 는 체인 호출 쓰기//this.css(/**/)._css(/**/) ._css(/*/)...핵심 mousemove 이벤트 코드

 
_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" 
}) 
} 
}, 

알림 층 위치의 이동 마우스 위치 X 축-this.offsetLeft-마우스 상자 너비/2 와 Math.max 와 Math.min,마우스 상자 가 tuxiang 큰 그림 의 위 치 를 초과 하지 않도록 이동=작은 그림 의 위치 X 확대 배수 X 너비(기본 값 1)반사 효 과 는 jquery 의 한 플러그 인 에서 보 았 습 니 다.그의 코드 를 보지 않 았 습 니 다.그의 dom 구 조 는 나 와 같은 방식 으로 원 그림 의 투명 도 를 0.2 로 설정 해 야 합 니 다.그러면 회색 으로 변 하고 마우스 층 을 투명 하 게 1 로 설정 합 니 다.즉,불투명 합 니 다.층 내 에 그림 과 imgsource 의 주소 가 같 습 니 다.이 그림 의 부모 요소 position 도 absolute 입 니 다.따라서 저 희 는 실시 간 으로 top 과 left 값 을 설정 하여 마우스 층 의 그림 을 찾 습 니 다.iframe

 
_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 설정 을 만 들 고 매개 변 수 를 iframe:true 로 설정 해 야 ie6 에서 만 들 수 있 습 니 다.다른 브 라 우 저 에서 true 를 설정 해도 생 성 되 지 않 습 니 다.코드 개선 중 1 효 과 를 추가 하 는 플러그 인 메커니즘 2 최적화 설정 너비 높 은 값 표현 식 의 코드 감각 이 너무 길 고 비대 합 니 다.