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实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
Vue.extend实现挂载到实例上的方法
May 01 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 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
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
用Python实现读写锁的示例代码
2018/11/05 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
python实现flappy bird小游戏
2018/12/24 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
基于python中__add__函数的用法
2019/11/25 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
2014小学植树节活动总结
2014/03/10 职场文书
中考冲刺决心书
2014/03/11 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
Python 内置函数速查表一览
2021/06/02 Python
Java实现给Word文件添加文字水印
2022/02/15 Java/Android