【三】图片加载的处理函数
- /*
- @ src [String] 图片的地址
- @ success [Function] 图片加载成功的回调函数
- @ error [Function] 图片加载失败的回调函数
- */
- imgLoading:function(opt){
- var _img = new Image(),
- _that = this;
- _img.onload = function(){
- _that.nImgWidth = this.width;
- _that.nImgHeight = this.height;
- if(typeof opt.success == 'function'){
- setTimeout(function(){
- opt.success();
- },300);
- }
- }
- _img.onerror = function(){
- if(typeof opt.error){
- opt.error();
- }
- }
- // 注意:要放在onload事件下面,否则ie会出现BUG
- _img.src = opt.src;
- }
源代码:
- /*
- author:laoguoyong
- */
- (function(){
- /* -------------------------简单的选择器-----------------------
- @ 参数 [string]
- ---------------------------------------
- ★-只支持以下选择-★
- @ 支持一级选择器:如'#id','.class','p'
- @ 支持后代选择,如 '.class p','body span'
- @ 支持子元素选择,如 '.class>p','body>span'
- ----------------------------------------
- @ return [Array]
- */
- var selector = function(str){
- // 定义元素数组
- var elem = [];
- /* 私有方法
- ------------------------*/
- //返回是id的元素
- function _getId(id){
- return document.getElementById(id);
- }
- //返回存在此类名的元素-元素
- function _getByClassName(className,parent){
- var class_array = [],
- node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
- reg = new RegExp("(^|\\s)"+className+"(\\s|$)");
- for(var n=0,i=node.length;n',是选择子代元素;
- --------------------------
- @ return [Array]
- */
- function _query(array_elem,r){
- var node = array_elem,
- type_name = node[0].match(/\#/)?'id_'+node[0].slice(1):node[0].match(/\./)?'className_'+node[0].slice(1):'tagName_'+node[0],
- child = _getDom(node[1]),
- type = type_name.split('_'),
- len = document.getElementsByTagName('*').length,
- reg = new RegExp("(^|\\s)"+type[1]+"(\\s|$)");;
- for(var i=0,j=child.length;i') break;
- par = par.parentNode;
- }
- }
- }
- }
- /* 接口
- -----------------------*/
- var elemStr = str.replace(/(^\s+)|(\s+$)/,'');
- if(document.querySelectorAll){
- var dom = document.querySelectorAll(elemStr);
- for(var n=0,len=dom.length;n\s]/g.exec(elemStr);
- if(split){
- var node = elemStr.split(split[0]);
- _query(node,split[0]);
- }else{
- elem = elem.concat( _getDom(elemStr) );
- }
- }
- return elem;
- }
- /* 弹窗功能构造函数
- -----------------------*/
- function LGY_photoBox(option){
- this.opt = option;
- this.oTarget = typeof option.target == 'object'?option.target:selector(option.target);
- if(!this.oTarget) return;
- this.nLen = this.oTarget.length; //总个数
- this.aBigimg_src = []; //大图数据数组
- this.aTitle = []; //标题数据数组
- this.nIndex = 0; //索引
- this.nImgWidth = 0; //动态获取图片的宽
- this.nImgHeight = 0; //动态获取图片的高
- this.nDelay = 0.2;
- this.intit();
- }
- LGY_photoBox.prototype = {
- intit:function(){
- var _that = this;
- this.getData();
- for(var n=0;n'+
- ''+
- ''+exhtml+''+
- ''+
- 'http://www.pconline.com.cn/blank.gif" />'+
- ''+
- ''+
- ''+
- ''+
- '/'+this.nLen+
- ''+
- '
- '+
- ''+
- '';
- },
- createCover:function(){
- // 创建覆盖层
- var doc = document,
- coverHtml = doc.createElement('div');
- coverHtml.id = 'gy_photoBox_cover';
- doc.body.appendChild(coverHtml);
- //设置覆盖层的样式
- this.tools.setCSS(this.tools.getId('gy_photoBox_cover'),{'height':(doc.body.scrollTop || doc.documentElement.scrollTop)+(doc.documentElement.clientHeight)+'px'});
- },
- setBoxCss:function(){
- var doc = document,
- nScrollTop = doc.body.scrollTop || doc.documentElement.scrollTop,
- nWindow_h = doc.documentElement.clientHeight,
- eBox_head_h = this.tools.getId('gy_photoBox_head').clientHeight,
- eBox = this.tools.getId('gy_photoBox'),
- eBoxPadding = 10,
- hold_h = nWindow_h - eBoxPadding - 50 - eBox_head_h,
- width = this.nImgWidth ,
- height = this.nImgHeight;
- // alert('nWindow_h:'+nWindow_h+'-'+'eBoxPadding:'+eBoxPadding+'-'+'eBox_head_h:'+eBox_head_h);
- // 图片大小超过可见范围,进行缩放
- if(this.nImgHeight>hold_h){
- height = hold_h,
- width = Math.ceil(this.nImgWidth*(height/this.nImgHeight));
- }
- //设置盒子在整个页面居中
- this.tools.setCss(eBox,{'width':width+'px',
- 'height':eBox_head_h + height + 'px',
- 'margin-left':-(width+eBoxPadding)/2+'px',
- 'top':nScrollTop+(nWindow_h-height-eBoxPadding)/2+'px'});
- this.tools.setCss(this.tools.getId('gy_photoBox_main'),{'width':width+'px','height':height + 'px'});
- //设置覆盖层的样式
- this.tools.setCss(this.tools.getId('gy_photoBox_cover'),{'height':nScrollTop+doc.documentElement.clientHeight+'px'});
- },
- removeBox:function(){
- var doc = document;
- if(this.tools.getId('gy_photoBox')){
- doc.body.removeChild(this.tools.getId('gy_photoBox'));
- }
- if(this.tools.getId('gy_photoBox_cover')){
- document.body.removeChild(this.tools.getId('gy_photoBox_cover'));
- }
- this.tools.setCss(document.documentElement,{'height':'auto','overflow-y':'auto','_overflow-y':'scroll','overflow-x':'auto'});
- },
- getData:function(){
- for(var n=0;n
最终效果图:
来源: http://www.phperz.com/article/17/0416/273395.html