简单初始化方法举例

 代码讲解

组件默认的参数配置,包括放大倍数，宽度，高度，透明度等的设置

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也不会创建，因为没有必要

 代码改进中

地址打包下载 :放大镜