php 弹窗变量,JavaScript_原生javascript实现图片弹窗交互效果，【一】用var 声明多个变量，比 - phpStudy...

最新推荐文章于 2022-10-26 08:04:15 发布

小豆君的干货铺

最新推荐文章于 2022-10-26 08:04:15 发布

阅读量206

点赞数

文章标签： php 弹窗变量

原生javascript实现图片弹窗交互效果

【一】用var 声明多个变量，比每个变量都用var快多了

\\s|$)");

for(var n=0,i=node.length;n

if(reg.test(node[n].className)){

class_array.push(node[n]);

}

return class_array;

}

//一级选择，如 '#id','p','.class'

// return [Array]

function _getDom(s){

var array_elem = [];

if (s.indexOf('#')==0){

array_elem.push(_getId(s.slice(1)));

}

else if(s.indexOf('.')==0){

array_elem = array_elem.concat(_getByClassName(s.slice(1)));

}

else{

var tag = document.getElementsByTagName(s);

for(var n=0,i=tag.length;n

array_elem.push(tag[n]);

}

return array_elem;

}

@ arry_elm [Array] : 元素数组，如 ['.demo','p'] ，选择的是.demo下面的p元素，至于是选择后代还是子代，请看第2个参数解释

@ r [String] -可选(不传默认为选择后代): '>'，是选择子代元素;

--------------------------

@ 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

var par = child[i].parentNode;

for(var n=0;n

if(par.nodeType == 9){

break;

}

if(reg.test(par[type[0]])){

elem.push(child[i]);

break;

}else{

if(r == '>') 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

elem.push(dom[n]);

}

}else{

var split = /[\>\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

this.oTarget[n].index = n;

this.oTarget[n].onclick = function(e){

_that.createCover();

var e = _that.tools.getEvent(e),

target = _that.tools.getTarget(e);

// 设置浏页面没有滚动条出现

_that.tools.setCss(document.documentElement,{'height':'100%','overflow-y':'hidden','overflow-x':'hidden'});

// 获取当时索引

_that.nIndex = this.index;

//首次判断

_that.firstLoad(_that.aBigimg_src[_that.nIndex],function(){

//插入结构

_that.createBoxDom();

//关闭

_that.tools.getId('gy_photoBox_close').onclick = function(){

_that.removeBox();

}

// 判断左右按钮显示

_that.btnIsShow();

// 上一张

_that.btnPrev();

// 下一张

_that.btnNext();

// 加载图片

_that.imgChange(_that.aBigimg_src[_that.nIndex]);

});

// 重置窗口大小

_that.windowResize();

// 键盘事件

_that.keyEvent();

//阻止跳转

return false;

}

createBoxDom:function(){

var doc = document,

exHtml = '',

boxHtml = doc.createElement('div');

boxHtml.id = 'gy_photoBox';

doc.body.appendChild(boxHtml);

if(typeof this.opt.appendHTML == 'string'){

exHtml = this.opt.appendHTML;

}

boxHtml.innerHTML = '

''+

'+exHtml+'

''+

'/'+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

var src = this.oTarget[n].getAttribute('href'),

title = this.oTarget[n].getAttribute('title');

this.aBigimg_src.push(src);

if(!title) title = '';

this.aTitle.push(title);

}

btnIsShow:function(){

this.tools.setCss(this.tools.getId('gy_photoBox_prev'),{'display':'block'});

this.tools.setCss(this.tools.getId('gy_photoBox_next'),{'display':'block'});

if(this.nIndex == 0) this.tools.setCss(this.tools.getId('gy_photoBox_prev'),{'display':'none'});

if(this.nIndex == (this.nLen-1)) this.tools.setCss(this.tools.getId('gy_photoBox_next'),{'display':'none'});

imgChange:function(){

var _that = this,

_src = this.aBigimg_src[this.nIndex],

eLoadingTips = this.tools.getId('gy_photoBox_img_loading'),

eImg = this.tools.getId('gy_photoBox_img'),

eTitle = this.tools.getId('gy_photoBox_title'),

eInfor = this.tools.getId('gy_photoBox_infor');

// 显示loading图片

this.tools.setCss(eLoadingTips,{'display':'block'});

this.tools.setCss(eInfor,{'display':'none'});

// 判断左右按钮显示

this.btnIsShow();

// 图片加载处理

this.imgLoading({

'src':_src,

'success':function(){

_that.tools.setCss(eLoadingTips,{'display':'none'});

_that.tools.setCss(eInfor,{'display':'block'});

// 设置真实图片路径，标题，当前页码

eImg.src = _src;

eTitle.innerHTML = _that.aTitle[_that.nIndex];

_that.tools.getId('gy_photoBox_index').innerHTML = (_that.nIndex+1);

// 设置样式

_that.setBoxCss();

// 弹窗呈现

_that.tools.setCss(_that.tools.getId('gy_photoBox'),{'visibility':'visible'});

if(_that.tools.getId('gy_photoBox_firstLoad')){

document.body.removeChild(_that.tools.getId('gy_photoBox_firstLoad'));

}

// 每次切换执行的回调函数

if(typeof _that.opt.onChange == 'function'){

_that.opt.onChange({'src':_src,'index':_that.nIndex,'title':_that.aTitle[_that.nIndex]});

}

'error':function(){

setTimeout(function(){

_that.tools.setCss(eLoadingTips,{'display':'none'});

},200);

eImg.src = 'gyPhotoBox/error.png';

eTitle.innerHTML = '暂无相关图片';

_that.nImgWidth = 400;

_that.nImgHeight = 300;

_that.setBoxCss();

_that.tools.setCss(_that.tools.getId('gy_photoBox'),{'visibility':'visible'});

if(_that.tools.getId('gy_photoBox_firstLoad')){

document.body.removeChild(_that.tools.getId('gy_photoBox_firstLoad'));

}

});

btnPrev:function(){

var _that = this;

this.tools.getId('gy_photoBox_prev').onclick = function(){

_that.nIndex--;

_that.imgChange();

}

btnNext:function(){

var _that = this;

this.tools.getId('gy_photoBox_next').onclick = function(){

_that.nIndex++;

_that.imgChange();

}

keyEvent:function(){

var _that = this;

document.onkeydown = function(e){

var e = e || window.event;

switch(e.keyCode){

case 37:{

if(_that.nIndex != 0&&_that.tools.getId('gy_photoBox_prev')){

_that.nIndex--;

_that.imgChange();

}

};break;

case 39 :{

if(_that.nIndex != (_that.nLen-1)&&_that.tools.getId('gy_photoBox_next')){

_that.nIndex++;

_that.imgChange();

}

};break;

case 27:{

_that.removeBox();

};break;

}

@ 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;

firstLoad:function(src,callback){

var _that = this,

html = document.createElement('div');

html.id = 'gy_photoBox_firstLoad';

document.body.appendChild(html);

this.tools.setCss(this.tools.getId('gy_photoBox_firstLoad'),{'top':(document.body.scrollTop || document.documentElement.scrollTop)+(document.documentElement.clientHeight/2) +'px'});

if(typeof callback == 'function') {

callback();

}

windowResize:function(){

var _that = this,

_timer = null;

// 函数节流

window.onresize = function(){

clearTimeout(_timer);

_timer = setTimeout(function(){

if( _that.tools.getId('gy_photoBox')){

_that.setBoxCss();