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 EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
js调用刷新界面的几种方式
May 03 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
详解JavaScript的变量
Apr 04 Javascript
ES6 Map结构的应用实例分析
Jun 26 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
DISCUZ 分页代码
2007/01/02 PHP
新手配置 PHP 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
PHP使用递归生成文章树
2015/04/21 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
JavaScript的类型简单说明
2010/09/03 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
JS中的==运算: [''] == false —>true
2016/07/24 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
Python页面加载的等待方式总结
2021/02/28 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
物流经理自我评价
2013/09/23 职场文书
大学生自我评价怎样写好
2013/10/23 职场文书
标准毕业生自荐信范文
2013/11/04 职场文书
安全资料员岗位职责
2013/12/14 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python