index.html图⽚弹窗，原⽣javascript实现图⽚弹窗交互效果【⼀】⽤var 声明多个变量，⽐每个变量都⽤var快多了
var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop,
sWindow_h = document.documentElement.clientHeight,
t_h = Id('gy_photoBox_head'),'height')),
hold_h = sWindow_h - t_h - 20,nodeselector
width = this.nImgWidth ,
height = this.nImgHeight;
【⼆】Dom事件优化，在 size时，定义个定时器,setTimeout，可以防⽌事件频繁调⽤
windowResize:function(){
var _that = this,
_timer = null;
// 函数节流
clearTimeout(_timer);
_timer = setTimeout(function(){
if( _Id('gy_photoBox')){
_that.setBoxCss();
}
},100);
}
}
【三】图⽚加载的处理函数
/
*
@ src [String] 图⽚的地址
@ success [Function] 图⽚加载成功的回调函数
@ error [Function] 图⽚加载失败的回调函数
*/
imgLoading:function(opt){
var _img = new Image(),
_that = this;
_load = function(){
_that.nImgWidth = this.width;
_that.nImgHeight = this.height;
if(typeof opt.success == 'function'){
setTimeout(function(){
opt.success();
},300);
}
}
_r = function(){
if(){
<();
}
}
/
/ 注意：要放在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){
ElementById(id);
}
//返回存在此类名的元素-元素
function _getByClassName(className,parent){
var class_array = [],
node = parent != undefined&&deType==1?
for(var n=0,i=node.length;n
st(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 = at(_getByClassName(s.slice(1)));
}
else{
var tag = ElementsByTagName(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 = ElementsByTagName('*').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
deType == 9){
break;
}
st(par[type[0]])){
elem.push(child[i]);
break;
}else{
if(r == '>') break;
par = par.parentNode;
}
}
}
}
/* 接⼝
-----------------------*/
var elemStr = place(/(^\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 = at( _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;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。