javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果


Posted in Javascript onMarch 08, 2010

javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
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设置的方法
_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 等等(...)
地址打包下载 :放大镜
Javascript 相关文章推荐
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
JavaScript中的闭包原理分析
Mar 08 #Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 #Javascript
JavaScript 滚轮事件使用说明
Mar 07 #Javascript
javascript下4个跨浏览器必备的函数
Mar 07 #Javascript
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 #Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 #Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 #Javascript
You might like
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
推荐25款php中非常有用的类库
2014/09/29 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
常用简易JavaScript函数
2009/04/09 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
Django Highcharts制作图表
2016/08/27 Python
Django自定义manage命令实例代码
2018/02/11 Python
python事件驱动event实现详解
2018/11/21 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
Python 复平面绘图实例
2019/11/21 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
Python 多进程、多线程效率对比
2020/11/19 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
高二美术教学反思
2014/01/14 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
地球上的星星观后感
2015/06/02 职场文书
基层工作经历证明
2015/06/19 职场文书
狂人日记读书笔记
2015/06/30 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书