zShowBox?:?圖片放大展示???簡單?舒服?快速?兼容性好

zShowBox.js

/* * zShowBox (圖片放大展示) */ function zShowBox(domChunk) {//為每張圖片鏈接加上 class="zshowbox"var zcounter = 0;$(domChunk + ' a').each(function () {var a_href = $(this)[0].href.toLowerCase();var file_type = a_href.substring(a_href.lastIndexOf('.'));if (file_type == '.jpeg' || file_type == '.jpg' || file_type == '.png' || file_type == '.gif' || file_type == '.bmp') { $(this).addClass('zshowbox').attr('id', 'zsb-' + zcounter); zcounter++; };});$(domChunk + ' a.zshowbox').click(function () {var current = $(this).attr('id').split('zsb-')[1],pagesize = zsb_getPageSize(),zsb_img_url = $(this).attr('href'),css_zsb_bg = 'z-index:9999;overflow:hidden;position:fixed;left:0;top:0;width:100%;height:100%;background:#000 url(' + loadingimg + ') no-repeat center center;',css_zsb = 'z-index:99999;position:fixed;left:50%;top:50%;',css_zsb_img = 'display:none;border:5px solid #777;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;box-shadow:1px 1px 5px #333,-1px -1px 5px #333;-moz-box-shadow:1px 1px 5px #333,-1px -1px 5px #333;-webkit-box-shadow:1px 1px 5px #333,-1px -1px 5px #333;',css_zsb_p_n = 'display:none;cursor:pointer;position:absolute;top:50%;line-height:80px;margin:-40px 0 0 0;color:#eee;text-shadow:1px 3px 5px #000;font-size:40px;font-family:Arial,Tahoma;';if (typeof document.body.style.maxHeight === "undefined") { //if IE 6alert(IE6！太落后了……');return false;} else {$('body').append('<div id="zsb_bg" style="' + css_zsb_bg + '"></div><div id="zsb" style="' + css_zsb + '"><img id="zsb_img" style="' + css_zsb_img + '" /><p id="zsb_prev" style="left:-30px;' + css_zsb_p_n + '">&laquo;</p><p id="zsb_next" style="right:-30px;' + css_zsb_p_n + '">&raquo;</p></div>');$('#zsb_bg').fadeTo(600, 0.7);zsh_img('#zsb_img', zsb_img_url, pagesize, current, zcounter);$('#zsb_prev,#zsb_next').click(function () {if ($(this).attr('id') == 'zsb_prev') current--; else current++;$(this).parent().prev().css("background-image", 'url(' + loadingimg + ')');$('#zsb').find('img').remove().end().append('<img id="zsb_img" style="' + css_zsb_img + '" />');zsb_img_url = $('#zsb-' + current).attr('href');zsh_img('#zsb_img', zsb_img_url, pagesize, current, zcounter);return false;});$('#zsb_bg,#zsb_img').click(function () {$('#zsb_bg,#zsb_img').unbind('click');$('#zsb_bg,#zsb').fadeOut(400, function () { $(this).remove(); });return false;});}return false;}); } function zsh_img(img_id, zsb_img_url, pagesize, current, zcounter) {$('#zsb_prev,#zsb_next').hide();//動態獲取圖片的寬度和高度的像素值// //IE下，ajax會緩存，導致onreadystatechange函數沒有被觸發，所以需要加一個隨機數 $(img_id).attr('src', zsb_img_url+ '?t=' + Math.random()).load(function () {var img_w,img_h;var x = pagesize[0] - 100, y = pagesize[1] - 100;//imgReady 圖片頭數據加載就緒事件 - 更快獲取圖片尺寸imgReady(zsb_img_url, function (){img_w=this.width; img_h=this.height;});// img_w = $(this).width(), img_h = $(this).height();if (img_w > x) {img_h = img_h * (x / img_w);img_w = x;if (img_h > y) {img_w = img_w * (y / img_h);img_h = y;}} else if (img_h > y) {img_w = img_w * (y / img_h);img_h = y;if (img_w > x) {img_h = img_h * (x / img_w);img_w = x;}}var marginleft = -(img_w / 2 + 5) + 'px',margintop = -(img_h / 2 + 5) + 'px';img_w = img_w + 'px', img_h = img_h + 'px';$(this).css({ "width": img_w, "height": img_h }).fadeIn(600).parent().css({ "margin-left": marginleft, "margin-top": margintop }).prev().css("background-image", "none");if (current > 0){ $('#zsb_prev').show();}if (current < zcounter - 1){ $('#zsb_next').show();}}); } function zsb_getPageSize() {var de = document.documentElement;var w = window.innerWidth || self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;var h = window.innerHeight || self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;arrayPageSize = [w, h];return arrayPageSize; } var loadingimg = (function loadingimg() { //獲取loading圖片urlvar i = 0, got = -1, url, len = document.getElementsByTagName('script').length;while (i <= len && got == -1) {url = document.getElementsByTagName('script')[i].src;got = url.indexOf('/zshowbox.js');i++;}return url.replace('/zshowbox.js', '/zshowbox-loading.gif'); })();

?

圖片頭數據加載就緒事件 - 更快獲取圖片尺寸

/** * 圖片頭數據加載就緒事件 - 更快獲取圖片尺寸 * @version 2011.05.27 * @author TangBin * @see http://www.planeart.cn/?p=1121 * @param {String} 圖片路徑 * @param {Function} 尺寸就緒 * @param {Function} 加載完畢 (可選) * @param {Function} 加載錯誤 (可選) * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () { alert('size ready: width=' + this.width + '; height=' + this.height); }); */ var imgReady = (function () {var list = [], intervalId = null,// 用來執行隊列tick = function () {var i = 0;for (; i < list.length; i++) {list[i].end ? list.splice(i--, 1) : list[i]();};!list.length && stop();},// 停止所有定時器隊列stop = function () {clearInterval(intervalId);intervalId = null;};return function (url, ready, load, error) {var onready, width, height, newWidth, newHeight,img = new Image();img.src = url;// 如果圖片被緩存，則直接返回緩存數據if (img.complete) {ready.call(img);load && load.call(img);return;};width = img.width;height = img.height;// 加載錯誤后的事件img.onerror = function () {error && error.call(img);onready.end = true;img = img.onload = img.onerror = null;};// 圖片尺寸就緒onready = function () {newWidth = img.width;newHeight = img.height;if (newWidth !== width || newHeight !== height ||// 如果圖片已經在其他地方加載可使用面積檢測newWidth * newHeight > 1024) {ready.call(img);onready.end = true;};};onready();// 完全加載完畢的事件img.onload = function () {// onload在定時器時間差范圍內可能比onready快// 這里進行檢查并保證onready優先執行!onready.end && onready();load && load.call(img);// IE gif動畫會循環執行onload，置空onload即可img = img.onload = img.onerror = null;};// 加入隊列中定期執行if (!onready.end) {list.push(onready);// 無論何時只允許出現一個定時器，減少瀏覽器性能損耗if (intervalId === null) intervalId = setInterval(tick, 40);};}; })();

?

調用：

zShowBox('.gridlist'); ?

附加 loging

本文轉自曾祥展博客園博客，原文鏈接http://www.cnblogs.com/zengxiangzhan/archive/2011/09/23/2185908.html：，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的zShowBox (图片放大展示jquery版 兼容性好)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。