- 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
- 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
JS图片灯箱(lightBox)效果基本原理和demo.doc
??? ? 到年底了,项目不怎么忙,所以有空特地研究了下KISSY中源码JS灯箱效果,感觉代码比较简单,所以就按照他们的思路依赖于Jquery框架也封装了一个,特地分享给大家,以前经常看到网上很多这样的插件,感觉很多人很牛逼的样子,这样的效果也能做出来,碰巧今天自己也能研究出来一个,代码也不多,就300多行代码,嘿嘿!如果写的不够好,或者还不够的,希望大家多多指教!或者多多发表意见,那些需要值得改进的地方!共同学习!
基本原理
? ? 点击缩略图浮层显示大图,可点击键盘←、→键切换图片,也可以鼠标点击左右箭头切换。按下键盘Esc键和点击关闭按钮效果一致。
配置项如下:
? container#container,?? container 容器标识,父级盒子IDtargetCls?.J_lightbox,???? targetCls 元素选择器,需要弹出的图片链接dom节点layer?#lightbox,??? 浮层模版选择器?closebtn? .closebtn,??????? 关闭浮层的X按钮prev.prevbtn,???????? 上一张触发器next.nextbtn,????????? 下一张触发器easinglinear??????????? jquery 动画函数 默认为 linear 或者 swing 或者jquery自带的动画效果JSFiddle效果如下
? HYPERLINK /longen/uXrVn/1/embedded/result/ \t _blank 想要查看效果,请轻轻的点击我,我怕疼,嘿嘿!!
? 代码中需要了解的知识点如下:
? 1. getBoundingClientRect()方法:该方法获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,他返回的是一个对象,即Object,该对象有是个属 性:top,left,right,bottom;这里的top、left和css中的理解很相似,但是right,bottom和css中的理解有点不 一样,看示意图:
?
以前getBoundingClientRect()是IE特有的,目前FF3+,opera9.5+,safari 4,都已经支持这个方法。所以兼容性都支持的。
2. 判断图片是否加载完成时? 标准浏览器用onload触发,IE用私有属性onreadystatechange触发,需要了解更深入的话 可以阅读这篇文章: HYPERLINK /zh-cn/causes/BX9021 \t _blank 想看我,先点击我!ok!
代码简单的分析下:
?1.页面初始化时候 调用init方法,执行点击_click()函数。如下代码:
init: function(options) {
this.config = $.extend(this.config, options || {});
var self = this, HYPERLINK
_config = self.config;
// 点击
self._click();
},
2. 点击_click()函数做了如下事情:
??? 1. 点击缩略图:调用 self._showLoadMask(); // 显示loading加载效果 就是页面未加载或者网速慢的时候 显示加载转圈那种效果。
??? 2. ?self._onLoad($(this).attr(href),this); // 执行此方法加载大图片。
??? 3. 鼠标mouerover事件和mouseout事件触发 如下代码:
// 鼠标mouseover事件(移到动画层)
$(_config.layer).mouseover(function(){
if(_cache.currentImg != 0) {
$(_config.prev).css(display,block);
}
if(_cache.currentImg != ($(_config.targetCls).length - 1)) {
$(_config.next).css(display,block);
}
});
// 鼠标移出 隐藏上一页按钮 下一页按钮
$(_config.layer).mouseout(function(){
$(_config.prev).css(display,none);
$(_config.next).css(display,none);
});
??? 4. 点击上一页按钮 或 下一页按钮 图片切换做相应的操作:如下
您可能关注的文档
最近下载
- 2023海南省邮政业安全保障中心招聘事业编制工作人员12人笔试备考题库及答案解析.docx VIP
- 第2章红外谱图解析习题课第章红外谱图解析习题课第2章红外谱图解析习题课第2章红外谱图解析习题课.ppt VIP
- 第七届全市职业技能大赛整理收纳师技术文件.docx VIP
- 化工污染物石油化工清洁生产94课件.pptx VIP
- 北京-LITE-产品使用说明书-引力版-BJ7000KPCC-BEV-LITE纯电动汽车产品使用说明书.pdf VIP
- 公共资源考试试题及答案.doc VIP
- 红外谱图解析习题课.pptx VIP
- CNAS-GL047-2021 医学实验室定量检验程序结果可比性验证指南.docx VIP
- 2025海南省邮政业安全保障中心招聘事业编制人员4人(第1号)笔试备考试题及答案解析.docx VIP
- 绿色化学与清洁生产.pptx VIP
文档评论(0)