> 웹 프론트엔드 > JS 튜토리얼 > 큰 그림 기능 코드 보기 jquery version_jquery

큰 그림 기능 코드 보기 jquery version_jquery

WBOY
풀어 주다: 2016-05-16 17:17:23
원래의
1209명이 탐색했습니다.
复看大图*/ 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);
}






复主代码

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿