_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 优化设定宽高值表达式的代码 感觉太长太臃肿
3 增加图片预载
4 增加回调函数接口
5 增加className，让用户可自定义
6 等等(...)
地址打包下载 :放大镜
您可能感兴趣的文章: