zShowBox 사진 확대 표시 jquery 버전 호환성_jquery

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)
};
})()


🎜>

코드 복사


코드는 다음과 같습니다.

zShowBox('.gridlist')

추가녹화

패키지 다운로드 주소

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)

2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

스플릿 소설을이기는 데 얼마나 걸립니까?

1 몇 달 전 By DDD

R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?

1 몇 달 전 By DDD

R.E.P.O. 최고의 그래픽 설정

2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션

1 몇 주 전 By DDD

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7393

15

자바 튜토리얼

1630

14

Cakephp 튜토리얼

1357

52

라라벨 튜토리얼

1268

25

PHP 튜토리얼

1217

29

더보기