javascript 돋보기 v1.0 Yui2_YUI.Ext 기반 돋보기 효과 관련-JS 튜토리얼-php.cn

V1.0 구현 기능
1 배율 설정
2 투명도 설정
3 반전 특수 효과
4 확대된 사진 레이어의 크기를 사용자 지정
5 마우스 레이어 커스터마이징
6 ie6에서 마스킹 문제 선택
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 숫자 
*/ 
최대:3, 
/**
* *돋보기 마우스 움직임 레이어의 투명도 
* @type Number 
*/ 
불투명도: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 마스크 선택 
* @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 (매그); 
/**
* 원본 이미지 
* @type HTMLElement 
 */ 
this.imgsource=this.content.getElementsByTagName("img")[0] 
/**
* 이미지 확대 
* @type HTMLElement 
*/ 
 this.img=this.mag.getElementsByTagName("img" )[0]; 
/**
* 마우스 레이어 
* @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(defaultConfig,config||{ });
이 문장은 다음 객체의 속성이 이전 객체의 속성을 덮어쓰고, 이와 같은
을 반환한다는 의미입니다. 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边框长degree*/ 
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,{ 
'위치':'절대', 
'너비':(this.config.zoomWidth!='auto' ?this.imgsource.offsetWidth*this.config.max*this.pi:this.imgsource.offsetWidth*this.config.max) "px" , 
'높이':(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", 
'높이':(this.config.zoomHeight!='auto'?this.config.zoomHeight:this.imgsource.offsetHeight) "px", 
'왼쪽':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); 
}, 

组件的初始화원시대적 매우 큰 사진입니다.
2. 如有自定义 ZOOMWIDTH 或 ZOOMHEIGHT 大小的时候大小的时候, 设置 this.pi 宽比和 this.pi2 高比 (为与实际图片大小间的比值为与实际图片大小间的比值)
3. 设置大图容器的宽高和位置
5.设置鼠标层的位置容宽高和透명도
6 给原图容器增加mousemove事件
7. 给原图容器增加mouseout事件
8 反color特效后,还樂透素，并删除用来实现效果的 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]);

} 
이것을 반환하세요. 
}, 

 
Yui는 자신만의 방식으로 Dom样式적 방법 D.setStyle(dom,style属性name,属性的值); 
사용 for (var s in json) 来遍历 json对象的所有属性 
이것을 반환하세요; 常用链式调사용写법 // 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='임시'; 
imgs.src=this.imgsource.src; 
this._css(imgs,{ 
'width':this.imgsource.offsetWidth "px", 
'height':this.imgsource.offsetHeight "px", 
'position':' 절대' 
}); 
tips.appendChild(imgs); 
this.imgs=imgs; 
} 
this._css(this.imgsource,{ 
"불투명도":0.2 
})._css(this.tips,{ 
"불투명도":1, 
" visible":"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，不让鼠标框超 outtuxiang
大图位置的移动=小图的位置 X 放大倍数 X 宽比(默认为1 )
반색된 광고 놀라운 속도의 명도为0.2 这样就变灰color了然后设置鼠标层透明为1,也就是不透明.层内是一个图 Images 와 imgsource의 地址是一样的
这图 Images 父元素 position 也是,所以我们要实时设置top과 left值来定位鼠标层적 사진
创建iframe

复代码代码如下:

_createIframe:function (el){ 
var layer = document.createElement('iframe'); 
layer.tabIndex = '-1'; 
layer.src = 'javascript:false;'; 
el.appendChild(레이어); 
this._css(layer,{ 
"너비":(this.config.zoomWidth!='auto' ? this.config.zoomWidth:this.imgsource.offsetWidth) "px", 
"높이 ":(this.config.zoomHeight!='auto'?this.config.zoomHeight:this.imgsource.offsetHeight) "px", 
"zIndex":this.config.zIndex 
}) 
 } 

 

iframe은 宽高와zIndex의 设置，配置参数设置iframe:true并在ie6下才会创建, 其他浏览器下设置true也不会创建，因为没有必要
代码改进中
1개의 增加特效的插件机机제
2개의 优化设定宽高值表达式的代码感觉太长太臃肿
3개의 增加图사진预载
4 增加回调函数接口
5 增加className，让用户可自定义
6 等等(...)
地址打包下载 :
放大镜