首頁 > web前端 > js教程 > 看大圖功能代碼jquery版_jquery

看大圖功能代碼jquery版_jquery

WBOY
發布: 2016-05-16 17:17:23
原創
1210 人瀏覽過
複製程式碼如下程式碼:

/*看大圖*/
var screenheight = $(視窗).height();
var screenwidth = $(window).width();
var loadCSS = function(){
var screenwidth = $(window).width();
varenwidth = $(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("頂部",(螢幕高度*0.7 - 30 - $("img.bigImg") ).高度())*0.5 30);
$("img.bigImg").css("頂部",(screenheight* 0.7 - 30 - $("img.bigImg").height())*0.5 30);
$.log("$(文檔).height():" $(文檔).height());
};
$("a#bigPic").click(function(){
$.log("screenheight:" screenheight "screenwidth:" screenwidth);
str = $(" img[img-size] ]").attr("src");
$("body").append("
");//灰色薄
$ ("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();
//當瀏覽器視窗大小改變時
$(window).resize(function () {
loadCSS();
});



複製程式碼程式碼如下:
/***遮罩層*** */
.灰色{
背景: #000;
顯示:塊;
z 索引:1000;
寬度:100%;
位置:絕對;
濾波器:alpha(不透明度:50);
不透明度:0.5;
頂部:0;
左:0;
頂部:0;
}

.lookBigPicture {
邊框:#000 實心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 {
}

.lookbigicn {
}

.lookbigicn {
}塊;
寬度:12px;
高度:12px;
背景:
url("http://img.t.sinajs.cn/t5/style/images/common/icon.png ?id=1383027536816")
-175px -25px 無重複;
垂直對齊:-2px;
左邊距:20px;
}

左邊距:20px;
}

<.w_112>顯示🎜> :內聯塊;
寬度:12px;
高度:12px;
背景:
url("http://img.t.sinajs.cn/t5/style/images/common/ icon.png?id=1383027536816")
-175px 0px 無重複;
垂直對齊:-2px;
}

.protoPic { }

.protoPic { 位置:絕對;顯示:內聯塊;
高度:30px;
頂部:10px;
右:50px;



複製程式碼

複製程式碼 程式碼如下: 收起 查看大圖
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板