zShowBox 사진 확대 표시 jquery 버전 호환성_jquery
- WBOY원래의
- 2016-05-16 18:01:451238검색
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) };
$(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;너비:100%;높이:100%;배경:#000 url(' loadingimg ') 반복 없음 중앙 중앙;',
css_zsb = 'z-index:99999;위치:고정;왼쪽: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 === "정의되지 않음") { //IE 6
alert(IE6!太落后了……')
false 반환
} else {
$('body').append('
$('#zsb_bg').fadeTo(600, 0.7);
zsh_img('#zsb_img', zsb_img_url, 페이지 크기, 현재, zcounter);
$('#zsb_prev,#zsb_next').click(function () {
if ($(this).attr('id') == 'zsb_prev') current--; else current ;
$(this).parent().prev().css("배경 이미지", 'url(' loadingimg ')')
$('#zsb').find('img'); .remove().end().append('')
zsb_img_url = $('#zsb-' current).attr( 'href');
zsh_img('#zsb_img', zsb_img_url, 페이지 크기, 현재, 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
});
}
false를 반환합니다.
});
}
function zsh_img(img_id, zsb_img_url, 페이지 크기, 현재, 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 = 페이지 크기[0] - 100, y = 페이지 크기[ 1] – 100; ; 🎜>});
// 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 (현재 > 0){ $('#zsb_prev').show();}
if (현재 < 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];
arrayPageSize를 반환합니다.
}
var loadingimg = (function loadingimg() { //获取loading图文url
var 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.
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('/upload/201109/20110924011408313.png', function () {
alert('크기 준비: 너비=' 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;
};
반환 함수(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);
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 ! == 높이 || 이미지가 다른 곳에 로드된 경우 영역 감지를 사용할 수 있습니다.
newWidth * newHeight > 1024
) {
ready.call(img); onready.end = true;
};
onready()
// 완전히 로드된 이벤트
img.onload = function () {
// 서버의 시차 범위 내에서는 onready보다 빠를 수 있습니다
// 여기를 확인하여 onready가 먼저 실행되는지 확인하세요
!onready.end && onready()
load && load.call(img );
// IE gif 애니메이션은 루프에서 onload를 실행합니다. onload를 비워 두세요.
img = img.onload = img.onerror =
}// 대기열에 추가 정기적으로 실행
if (!onready .end) {
list.push(onready)
// 브라우저 성능 손실을 줄이기 위해 언제든지 하나의 타이머만 표시되도록 허용됩니다
if (intervalId === null) IntervalId = setInterval(tick , 40)
};
})()
🎜>
코드 복사
코드는 다음과 같습니다.
패키지 다운로드 주소