/*
* 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('loadimg')リピートなし中央中央;',
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 = '表示:なし;カーソル:ポインター;位置:絶対;上:50%;行の高さ:80px;マージン:-40px 0 0 0;色: #eee;text-shadow:1px 3px 5px #000;font-size:40px;font-family:Arial,Tahoma;';
if (typeof document.body.style.maxHeight === "未定義") { //if IE 6
alert(IE6！太落後了……');
return
} 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("background-image", 'url('loadimg')');
$('#zsb').find('img') .remove().end().append('
![]()
');
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(); });
}
false を返します。
});
}
関数 zsh_img(img_id, zsb_img_url, pagesize, current, zcounter) {
$('#zsb_prev,#zsb_next').hide();
//画像の高さと画像の値を自動的に取得します。
// //IE では、ajax セッションが存在し、readystatechange 関数の数がトリガーされないため、追加の付随数値
$(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_h)
; >} else if (img_h > y) {
img_w = img_w * (y / img_h);
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 (現在 });
}
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 を返す;
}
varloadimg = (functionloadimg() { //获取loading图片url
var i = 0, got = -1, url, len = document.getElementsByTagName('script').length;
while (i 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('/upload/201109/20110924011408313.png', function () {
alert('サイズ準備完了: width=' this.width '; height=' this.height );
});
*/
var imgReady = (function () {
var list = [], intervalId = null,
// キュー
tick の実行に使用されます= function () {
var i = 0;
for (; i list[i].end ? list.splice(i--, 1) : list[ i]();
!list.length && stop();
},
// すべてのタイマーキューを停止します
stop = function () clearInterval (intervalId);
intervalId = null;
return 関数 (url、ready、load、error) {
var onready、width、height、newHeight、
img = new Image();
img.src = url;
// 画像がキャッシュされている場合は、キャッシュされたデータを直接返します
if (img.complete) {
ready.call(img) ;
load &&load.call(img);
width = img.width
// 読み込みエラー後のイベント
img.onerror = function () {
error && error.call(img);
onready.end = true;
img = img.onload = img.onerror = null; } ;
// 画像サイズready
onready = function () {
newWidth = img.width;
newHeight = img.height;
if (newWidth !== width || newHeight ! == 高さ ||
// 画像が他の場所にロードされている場合は、領域検出を使用できます。
newWidth > 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 = null
};定期的に実行します
if (!onready .end) {
list.push(onready)
// ブラウザーのパフォーマンスの低下を軽減するために、一度に表示できるタイマーは 1 つだけです
if (intervalId === null) interval(tick , 40);
})();
コードをコピーします
コードは次のとおりです。
zShowBox('.gridlist');
追加収録
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
