큰 그림 기능 코드 보기 jquery version_jquery

复看大图*/ var screenheight = $( 창).높이(); var screenwidth = $(window).width(); var loadCSS = 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({"max-width":(screenwidth*0.6 - 30),"max-height":screenheight*0.7-40});
$("img.bigImg").load(function(){
$("img.bigImg").css("top",(화면 높이*0.7 - 30 - $("img.bigImg" ).height())*0.5 30)
});
$("img.bigImg").css("top",(화면 높이*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("

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

查看原图×

");
$("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 solid 1px;
위치: 절대;
z-색인: 2000;
텍스트 정렬: 가운데;
배경: 검정색;
}

.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 {
디스플레이: 인라인 블록;
너비: 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 no-repeat;
세로 정렬: -2px;
}

.protoPic {
위치: 절대;
디스플레이: 인라인 블록;
높이: 30px;
상단: 10px;
오른쪽: 50px;
오버플로: 숨김;
커서: 포인터;
색상: #F8F8F8;
텍스트 그림자: 0 1px 0 rgba(0, 0, 0, .5);
}






复主代码

代码如下: < p pic-choice style="display: none;"> 收起 查看大图