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之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
解决ionic和angular上拉加载的问题
Aug 03 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 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
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
python 自动批量打开网页的示例
2019/02/21 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
python pandas 时间日期的处理实现
2019/07/30 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
Python restful框架接口开发实现
2020/04/13 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
会计专业自我鉴定范文
2013/10/06 职场文书
经管应届生求职信范文
2014/05/18 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL