JS图片灯箱(lightBox)效果基本原理和demo.docVIP

JS图片灯箱(lightBox)效果基本原理和demo.doc

  1. 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
  2. 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  3. 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
  4. 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
  5. 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们
  6. 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
  7. 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. 点击上一页按钮 或 下一页按钮 图片切换做相应的操作:如下

文档评论(0)

xinshengwencai + 关注
实名认证
文档贡献者

该用户很懒,什么也没介绍

版权声明书
用户编号:5311233133000002

1亿VIP精品文档

相关文档