原生javascript實(shí)現(xiàn)圖片彈窗交互效果
更新時(shí)間：2015年01月12日 10:54:53 投稿：hebedich
這篇文章主要介紹了原生javascript實(shí)現(xiàn)圖片彈窗交互效果的方法及的相關(guān)資料,需要的朋友可以參考下
【一】用var 聲明多個(gè)變量，比每個(gè)變量都用var快多了
復(fù)制代碼 代碼如下:
var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop,
sWindow_h = document.documentElement.clientHeight,
t_h = parseInt(this.getCss(this.getId('gy_photoBox_head'),'height')),
hold_h = sWindow_h - t_h - 20,
width = this.nImgWidth ,
height = this.nImgHeight;
【二】Dom事件優(yōu)化，在 window.onresize時(shí)，定義個(gè)定時(shí)器,setTimeout，可以防止事件頻繁調(diào)用
復(fù)制代碼 代碼如下:
windowResize:function(){
var _that = this,
_timer = null;
// 函數(shù)節(jié)流
window.onresize = function(){
clearTimeout(_timer);
_timer = setTimeout(function(){
if( _that.tools.getId('gy_photoBox')){
_that.setBoxCss();
}
},100);
}
}
【三】圖片加載的處理函數(shù)
復(fù)制代碼 代碼如下:
/*
@ src [String] 圖片的地址
@ success [Function] 圖片加載成功的回調(diào)函數(shù)
@ error [Function] 圖片加載失敗的回調(diào)函數(shù)
*/
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會(huì)出現(xiàn)BUG
_img.src = opt.src;
}
源代碼：
復(fù)制代碼 代碼如下:
/*
author:laoguoyong
*/
(function(){
/* -------------------------簡(jiǎn)單的選擇器-----------------------
@ 參數(shù) [string]
---------------------------------------
★-只支持以下選擇-★
@ 支持一級(jí)選擇器：如'#id','.class','p'
@ 支持后代選擇，如 '.class p','body span'
@ 支持子元素選擇，如 '.class>p','body>span'
----------------------------------------
@ return [Array]
*/
var selector = function(str){
// 定義元素?cái)?shù)組
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<i;n++){
if(reg.test(node[n].className)){
class_array.push(node[n]);
}
}
return class_array;
}
//一級(jí)選擇，如 '#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<i;n++){
array_elem.push(tag[n]);
}
}
return array_elem;
}
/*
@ arry_elm [Array] : 元素?cái)?shù)組，如 ['.demo','p'] ，選擇的是.demo下面的p元素，至于是選擇后代還是子代，請(qǐng)看第2個(gè)參數(shù)解釋
@ r [String] -可選（不傳默認(rè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<j;i++){
var par = child[i].parentNode;
for(var n=0;n<len;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<len;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;
}
/* 彈窗功能構(gòu)造函數(shù)
-----------------------*/
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; //總個(gè)數(shù)
this.aBigimg_src = []; //大圖數(shù)據(jù)數(shù)組
this.aTitle = []; //標(biāo)題數(shù)據(jù)數(shù)組
this.nIndex = 0; //索引
this.nImgWidth = 0; //動(dòng)態(tài)獲取圖片的寬
this.nImgHeight = 0; //動(dòng)態(tài)獲取圖片的高
this.nDelay = 0.2;
this.intit();
}
LGY_photoBox.prototype = {
intit:function(){
var _that = this;
this.getData();
for(var n=0;n<this.nLen;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);
// 設(shè)置瀏頁(yè)面沒(méi)有滾動(dòng)條出現(xiàn)
_that.tools.setCss(document.documentElement,{'height':'100%','overflow-y':'hidden','overflow-x':'hidden'});
// 獲取當(dāng)時(shí)索引
_that.nIndex = this.index;
//首次判斷
_that.firstLoad(_that.aBigimg_src[_that.nIndex],function(){
//插入結(jié)構(gòu)
_that.createBoxDom();
//關(guān)閉
_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();
//阻止跳轉(zhuǎn)
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 = '<div id="gy_photoBox_prev"></div>'+
'<div id="gy_photoBox_next"></div>'+
'<span id="gy_photoBox_close"></span>'+
'<div id="gy_photoBox_head">'+exHtml+'</div>'+
'<div id="gy_photoBox_main">'+
'<img id="gy_photoBox_img_loading" src=" '<img id="gy_photoBox_img" />'+
'<div id="gy_photoBox_infor">'+
'<span id="gy_photoBox_num">'+
'<strong id="gy_photoBox_index"></strong>'+
'/'+this.nLen+
'</span>'+
'<p id="gy_photoBox_title"></p>'+
'</div>'+
'</div>';
},
createCover:function(){
// 創(chuàng)建覆蓋層
var doc = document,
coverHtml = doc.createElement('div');
coverHtml.id = 'gy_photoBox_cover';
doc.body.appendChild(coverHtml);
//設(shè)置覆蓋層的樣式
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);
// 圖片大小超過(guò)可見(jiàn)范圍，進(jìn)行縮放
if(this.nImgHeight>hold_h){
height = hold_h,
width = Math.ceil(this.nImgWidth*(height/this.nImgHeight));
}
//設(shè)置盒子在整個(gè)頁(yè)面居中
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'});
//設(shè)置覆蓋層的樣式
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<this.nLen;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'});
// 設(shè)置真實(shí)圖片路徑，標(biāo)題，當(dāng)前頁(yè)碼
eImg.src = _src;
eTitle.innerHTML = _that.aTitle[_that.nIndex];
_that.tools.getId('gy_photoBox_index').innerHTML = (_that.nIndex+1);
// 設(shè)置樣式
_that.setBoxCss();
// 彈窗呈現(xiàn)
_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'));
}
// 每次切換執(zhí)行的回調(diào)函數(shù)
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 = '暫無(wú)相關(guān)圖片';
_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] 圖片加載成功的回調(diào)函數(shù)
@ error [Function] 圖片加載失敗的回調(diào)函數(shù)
*/
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會(huì)出現(xiàn)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;
// 函數(shù)節(jié)流
window.onresize = function(){
clearTimeout(_timer);
_timer = setTimeout(function(){
if( _that.tools.getId('gy_photoBox')){
_that.setBoxCss();
}
},100);
}
},
tools:function(){
return{
getEvent:function(e){
return e || window.event;
},
getTarget:function(e){
return e.target || e.srcElement;
},
preventDefault:function(e){
e.preventDefault?e.preventDefault():e.returnValue = false;
},
getId:function(id){
return document.getElementById(id);
},
getCss:function(node,value){
return node.currentStyle?node.currentStyle[value]:getComputedStyle(node,null)[value];
},
setCss:function(node,val){
for(var v in val){
node.style.cssText += ';'+ v +':'+val[v];
}
}
}
}()
}
window.LGY_photoBox = LGY_photoBox;
})();
最終效果圖：
您可能感興趣的文章:
- js彈窗返回值詳解(window.open方式)
- js彈窗代碼 可以指定彈出間隔
- js退出彈窗代碼集合
- js點(diǎn)擊彈出div層實(shí)現(xiàn)可拖曳的彈窗效果
- js實(shí)現(xiàn)彈窗插件功能實(shí)例代碼分享
- js 右下角彈窗效果代碼(IE only)
- JS自動(dòng)適應(yīng)的圖片彈窗實(shí)例
- 原生JS可拖動(dòng)彈窗效果實(shí)例代碼
- JavaScript 實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)彈窗DEMO附圖
- javascript實(shí)現(xiàn)倒計(jì)時(shí)并彈窗提示特效
- js解決彈窗問(wèn)題實(shí)現(xiàn)班級(jí)跳轉(zhuǎn)DIV示例
- javascript實(shí)現(xiàn)的右下角彈窗實(shí)例
- JS實(shí)現(xiàn)一次性彈窗的方法【刷新后不彈出】
相關(guān)文章
JS與JQuery分別實(shí)現(xiàn)淘寶五星好評(píng)特效
這篇文章主要為大家詳細(xì)介紹了JS與JQuery分別實(shí)現(xiàn)淘寶五星好評(píng)特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
JavaScript?設(shè)計(jì)模式中的代理模式詳解
這篇文章主要介紹了JavaScript?設(shè)計(jì)模式中的代理模式詳解,代理模式，代理是一個(gè)對(duì)象，它可以用來(lái)控制對(duì)另一個(gè)對(duì)象的訪問(wèn),更多相關(guān)內(nèi)容需要的朋友可以參考一下2022-07-07
小程序?qū)崿F(xiàn)發(fā)表評(píng)論功能
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)發(fā)表評(píng)論功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
javascript中String類的subString()方法和slice()方法
最近在看《Javascript高級(jí)程序設(shè)計(jì)》一書，在書中發(fā)現(xiàn)一些以前沒(méi)有接觸過(guò)的且比較實(shí)用的技巧和知識(shí)點(diǎn)，想通過(guò)博客記錄一下，以加深記憶。2011-05-05
Vue之vue-tree-color組件實(shí)現(xiàn)組織架構(gòu)圖案例詳解
這篇文章主要介紹了Vue之vue-tree-color組件實(shí)現(xiàn)組織架構(gòu)圖案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法示例
這篇文章主要介紹了JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法,結(jié)合具體實(shí)例形式分析了JS采用鏈?zhǔn)讲僮鞣椒ǚ庾Query中連綴操作實(shí)現(xiàn)css()方法的相關(guān)技巧,需要的朋友可以參考下2017-04-04
對(duì)應(yīng)用到對(duì)textarea處理的朋友可以參考下?？刂频谋容^不錯(cuò)的代碼封裝。2010-11-11
瀑布流主要應(yīng)用在圖片展示頁(yè)面上。如果有一大批圖片需要展示，原始圖片尺寸不一致，又希望每張圖片都能不剪裁，完整顯示，那么就要給圖片規(guī)定一個(gè)寬度，解放它們的高度。利用網(wǎng)頁(yè)高度不限這個(gè)特性，充分利用頁(yè)面的空間，盡可能的展示多的圖片。下面我們就來(lái)詳細(xì)探討下2015-05-05
本篇文章主要介紹了bootstrap Table插件使用demo，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
math.round()方法將對(duì)參數(shù)進(jìn)行四舍五入操作，對(duì)js math.round相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12