v1.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(defaultConfig,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.设置大图的宽度和高度
4. 设置大图容器的宽高和位置
5.设置鼠标层的位置和宽高和透明度
6 给原图容器增加mousemove事件
7. 给原图容器增加mouseout事件
8 反色特效后,还原透明度，并删除用来实现效果的 Dom (在鼠标层结构内用appendChild一个img元素)
9 ie6 创建iframe 用来遮挡的select。(默认情况下在无iframe的时候,ie6会被select挡住，无法用zIndex来修正 )
10 设置光标样式
style设置的方法
复制代码 代码如下: