大きな画像で表示 関数コード jquery version_jquery

复制代码代码如下:

/*查看大图*/
var screenheight = $(ウィンドウ).height();
var screenwidth = $(window).width();
varloadCSS = function(){
var screenwidth = $(window).width();
var screenheight = $(window).height();
$("div.lookBigPicture").css({"left":screenwidth*0.2,"top":screenheight*0.15 $(document).scrollTop(),
"width":screenwidth*0.6, "高さ":画面の高さ*0.7});
$("img.bigImg").css({"最大幅":(画面幅*0.6 - 30),"最大高さ":画面高さ*0.7-40});
$("img.bigImg").load(function(){
$("img.bigImg").css("top",(screenheight*0.7 - 30 - $("img.bigImg" ).height())*0.5 30);
$("img.bigImg").css("top",(screenheight*0.7 - 30 - $("img.bigImg").height())*0.5 30);
$.log("$(document).height():" $(document).height());
};
$("a#bigPic").click(function(){
$.log("screenheight:" screenheight "screenwidth:" screenwidth);
str = $("img[img-size ]").attr("src");
$("body").append("

");// 灰色底层
$ ("body").append("

查看原图×gt;

");
$("div.grey").css( "height",$(document).height());
loadCSS();
$("body").css({overflow:"hidden"}); // 禁止用滚動条
});
$("body").delegate("div.grey,a.bigpicclose","click",function(){
$("body").css({overflow:"visible"}) ; //恢复滚動条
$("div.lookBigPicture").remove();
$("div.grey").remove();
//当浏览器窗口大小変更時
$(window).resize(function () {
loadCSS();
});

复制代 代码如下:

/***マスクレイヤー*** */

.grey {
背景: #000;
表示: ブロック;
z インデックス: 1000;
幅: 100%;
位置: 絶対。
フィルター: アルファ(不透明度 : 50);
不透明度: 0.5;
トップ: 0;
左: 0;
トップ: 0;
}

.lookBigPicture {
border: #000 ソリッド 1px;
位置: 絶対。
z インデックス: 2000;
text-align: 中央;
背景: 黒。
}

.bigImg {
margin-left: auto;
マージン右: 自動;
位置: 相対。
}

.bigpicclose {
位置: 絶対;
幅: 36px;
高さ: 36px;
フォントサイズ: 0;
z インデックス: 20001;
トップ: -18px;
右: -18px;
背景:
url("http://img.t.sinajs.cn/t5/style/images/layer/multipic_ico.png?id=20131018174500")
0 0 繰り返しなし;
}

.lookbigicn {
display: inline-block;
幅: 12px;
高さ: 12px;
背景:
url("http://img.t.sinajs.cn/t5/style/images/common/icon.png?id=1383027536816")
-175px -25px リピートなし;
垂直整列: -2px;
マージン左: 20px;
}

.W_ico12 {
表示: インラインブロック;
幅: 12px;
高さ: 12px;
背景:
url("http://img.t.sinajs.cn/t5/style/images/common/icon.png?id=1383027536816")
-175px 0px リピートなし;
垂直整列: -2px;
}

.protoPic {
位置: 絶対;
表示: インラインブロック;
高さ: 30px;
上: 10px;
右: 50ピクセル;
オーバーフロー: 非表示;
カーソル: ポインタ;
色: #F8F8F8;
text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

复制代 代码如下:

< p pic-choice style="display: none;">

收起
查看大図