原生javascript實作圖片彈窗互動效果_javascript技巧
javascript
【一】用var 宣告多個變量，比每個變數都用var快多了
複製程式碼 程式碼如下:
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事件最佳化，在 window.onresize時，定義個定時器,setTimeout，可以防止事件頻繁地呼叫
複製程式碼 程式碼如下:
windowResize:function(){
var _that = this,
_timer = null;
// 函數節流
window.onresize = function(){
clearTimeout(_timer);
_timer = setTimeout(function(){
if( _that.tools.getId('gy_photoBox')){
_that.setBoxCss();
}
},100);
}
}
【三】圖片載入的處理函數
複製程式碼 程式碼如下:
/*
@ 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.getElementsBy?parent.getElementsByTagName('*'):document.getElementsBy?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
reg = new RegExp("(^|\s)" className "(\s|$)");
for(var n=0,i=node.length;n if(reg.test(node[n].className)){
類_array.push(node[n]);
}
}
return 類_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] -可選（不傳預設為選擇後代）: '>'，是選擇子代元素;
--------------------------
@返回[陣列]
*/
函數 _query(array_elem,r){
var node = array_elem,
type_name = 節點[0].match(/#/)?'id_'節點[0].slice(1):節點[0].match(/./)?'className_'節點[0].slice(1 ):'tagName_'節點[0],
子 = _getDom(節點[1]),
type = type_name.split('_'),
len = document.getElementsByTagName('*').length,
reg = new RegExp("(^|\s)" type[1] "(\s|$)");
for(var i=0,j=child.length;i
for(var n=0;n
休息；
}
if(reg.test(par[type[0]])){
elem.push(child[i]);
休息; }其他{
if(r == '>') 中斷;
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
}
}其他{
var split = /[>s]/g.exec(elemStr);
若（分割）{
var node = elemStr.split(split[0]);
_query(節點,split[0]);
}其他{
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].onclick = function(e){
_that.createCover();
var e = _that.tools.getEvent(e),
target = _that.tools.getTarget(e);
// 設定且沒有捲軸出現
為 // 取得當時索引
_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+'
'+'
'+
'
http://www.pconline.com.cn/blank.gif" />'+
'![]()
'+
'
'
';'
'
'
'+
''+
''+
'/'+this.nLen+
''+
''+
'
'+''+
''+
'/'+this.nLen+
''+
''+
'
'
},
createCover:function(){
// 建立覆蓋層
var doc = 文檔，且
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 = 文檔，且
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,
寬度 = this.nImgWidth ,
高度 = this.nImgHeight;
//alert('nWindow_h:'nWindow_h'-''eBoxPadding:'eBoxPadding'-''eBox_head_h:'eBox_head_h);
// 圖片大小超過可見範圍，並進行縮放
if(this.nImgHeight>hold_h){
高度=hold_h，
width = Math.ceil(this.nImgWidth*(height/this.nImgHeight));
}
//設定框在整個頁面中位置
this.tools.setCss(eBox,{'width':width 'px',
'height':eBoxhead_h 高度 'p 地 'topBox *n this.tools.setCss(this.tools.getId('gy_photoBox_main'),{'width':寬度'px','height':高度'px'});
//設定覆蓋層的樣式
this.tools.setCss(this.tools.getId('gy_photoBox_cover'),{'height':nScrollTop doc.documentElement.clientHeight 'px'});
},
刪除方塊：函數（）{
var doc = 文檔;
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
title = this.oTarget[n].getAttribute('title');
this.aBigimg_src.push(src);
if(!title) 標題 = '';
this.aTitle.push(標題);
}
},
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 =這個，
_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,
'成功':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":_.aTitle* }
},
'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;
開關（e.keyCode）{
案例37：{
if(_that.nIndex != 0&&_that.tools.getId('gy_photoBox_prev')){
_that.nIndex--;
_that.imgChange();
}
};休息;
案例39：{
if(_that.nIndex != (_that.nLen-1)&&_that.tools.getId('gy_photoBox_next')){
_that.nIndex ;
_that.imgChange();
}
};休息;
案例27：{
_that.removeBox();
};休息;
}
}
},
/*
@ src [String] 圖片的地址
@success [函數] 圖片載入成功的回呼函數
@error [函數] 圖片載入失敗的回呼函數
*/
imgLoading:函數(opt){
var _img = new Image(),
_that = this;
_img.onload = function(){
_that.nImgWidth = this.width;
_that.nImgHeight = this.height;
if(typeof opt.success == '函數'){
setTimeout(function(){
opt.success();
},300);
}
}
_img.onerror = function(){
if(typeof opt.error){
opt.error();
}
}
//注意：放在onload事件下面，否則會出現BUG
_img.src = opt.src;
},
以先載入：函數（src，回呼）{
var _that = 這個，
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. ;
if(typeof 回呼 == '函數') {
回調();
}
},
視窗調整大小：函數（）{
var _that = 這個，
_timer = null;
// 函數節流
window.onresize = function(){
清除逾時(_timer);
_timer = setTimeout(function(){
if( _that.tools.getId('gy_photoBox')){
_that.setBoxCss();
}
},100);
}
},
工具:函數(){
返回{
getEvent:function(e){
返回 e || window.event;
},
getTarget:function(e){
回傳 e.target || e.srcElement;
},
PreventDefault:function(e){
e.preventDefault?e.preventDefault():e.returnValue = false;
},
getId:函數(id){
return document.getElementById(id);
},
getCss:function(節點,值){
return node.currentStyle?node.currentStyle[value]:getCompulatedStyle(node,null)[value];
},
setCss:function(node,val){
for(var v in val){
節點.style.cssText = ';' v ':' val[v];
}
}
}
}()
}
window.LGY_photoBox = LGY_photoBox;
})();
最終效果圖：
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
1 個月前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
3 週前
By DDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
2 週前
By DDD
威爾R.E.P.O.有交叉遊戲嗎？
1 個月前
By 尊渡假赌尊渡假赌尊渡假赌
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何使用WebSocket和JavaScript實現線上語音辨識系統
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系
WebSocket與JavaScript：實現即時監控系統的關鍵技術
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技
如何利用JavaScript和WebSocket實現即時線上點餐系統
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單
如何使用WebSocket和JavaScript實現線上預約系統
Dec 17, 2023 am 09:39 AM
如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工
JavaScript與WebSocket：打造高效率的即時天氣預報系統
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
javascript如何使用insertBefore
Nov 24, 2023 am 11:56 AM
用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。
JavaScript與WebSocket：打造高效率的即時影像處理系統
Dec 17, 2023 am 08:41 AM
JavaScript是一種廣泛應用於Web開發的程式語言，而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能，我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統，並提供具體的程式碼範例。首先，我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備，可以擷取即時的影像數
