簡單初始化方法舉例

 代碼講解

組件默認的參數配置,包括放大倍數，寬度，高度，透明度等的設置

2 定義屬性

init函數接受三個實參 原圖的容器id,和放大后的圖片容器id和配置參數 (裝firebug的同學可以看下代碼結構)

this.config=L.merge(defaultConfig,config||{});

這句話是后面的對象的屬性覆蓋前面的對象的屬性,并返回

如 this.config=L.merge({"a":"aa"},{"a":"bb"});

此時的this.config.a == "bb"

如果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.設置大圖的寬度和高度

4. 設置大圖容器的寬高和位置

5.設置鼠標層的位置和寬高和透明度

6 給原圖容器增加mousemove事件

7. 給原圖容器增加mouseout事件

8 反色特效后,還原透明度，并刪除用來實現效果的 Dom (在鼠標層結構內用appendChild一個img元素)

9 ie6 創建iframe 用來遮擋的select。(默認情況下在無iframe的時候,ie6會被select擋住，無法用zIndex來修正 )

10 設置光標樣式

style設置的方法

Yui有提供自己的 設置Dom樣式的方法 D.setStyle(dom,style屬性名,屬性的值);

用 for (var s in json) 來遍歷 json對象的所有屬性

return this; 常用的鏈式調用寫法  // this._css(/**/)._css(/**/) ._css(/**/) ……

核心mousemove事件代碼

提示層位置的移動 鼠標位置X軸 - this.offsetLeft - 鼠標框寬度/2

并用Math.max和Math.min，不讓鼠標框超出tuxiang

大圖位置的移動=小圖的位置 X 放大倍數 X 寬比(默認為1)

反色效果是在jquery的一個插件上看到的 沒有看他的代碼 看了下他dom結構 應該和我這種實現方式是一樣的

設置原圖的透明度為0.2 這樣就變灰色了 然后設置鼠標層透明為1,也就是不透明.層內是一個圖片 和 imgsource的地址是一樣的

這圖片的父元素position也是absolute,所以我們要實時設置top和left值來定位鼠標層的圖片

創建iframe

iframe元素的寬高和zIndex的設置，配置參數設置iframe:true并在ie6下 才會創建,在其他瀏覽器下設置true也不會創建，因為沒有必要

 代碼改進中

地址打包下載 :放大鏡