快捷導(dǎo)航

查看大圖功能代碼jquery版

更新時間：2013年11月05日 17:37:48 作者：

查看大圖的效果想必大家在瀏覽網(wǎng)頁時都有看過吧，其實實現(xiàn)起來很簡單的，下面有個不錯的示例，喜歡的朋友可以參考下

 
/*查看大圖*/ 
var screenheight = $(window).height(); 
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,"height":screenheight*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",(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("<div class='grey'></div>");//灰色底層 
$("body").append("<div class='lookBigPicture'><span class='protoPic'><a z-index='20001' target='_blank' href='"+str+"'>查看原圖</a></span><a href='javascript:;' class='bigpicclose' title='關(guān)閉'>×</a><img class='bigImg' src='"+str+"'/></div>"); 
$("div.grey").css( "height",$(document).height()); 
loadCSS(); 
$("body").css({overflow:"hidden"}); //禁用滾動條 
}); 
$("body").delegate("div.grey,a.bigpicclose","click",function(){ 
$("body").css({overflow:"visible"}); //恢復(fù)滾動條 
$("div.lookBigPicture").remove(); 
$("div.grey").remove(); 
}); 
//當(dāng)瀏覽器窗口大小改變時 
$(window).resize(function () { 
loadCSS(); 
}); 

復(fù)制代碼代碼如下:

 
/***遮罩層****/ 
.grey { 
background: #000; 
display: block; 
z-index: 1000; 
width: 100%; 
position: absolute; 
filter: alpha(opacity : 50); 
opacity: 0.5; 
top: 0; 
left: 0; 
top: 0; 
} 

.lookBigPicture { 
border: #000 solid 1px; 
position: absolute; 
z-index: 2000; 
text-align: center; 
background: black; 
} 

.bigImg { 
margin-left: auto; 
margin-right: auto; 
position: relative; 
} 

.bigpicclose { 
position: absolute; 
width: 36px; 
height: 36px; 
font-size: 0; 
z-index: 20001; 
top: -18px; 
right: -18px; 
background: 
url("http://img.t.sinajs.cn/t5/style/images/layer/multipic_ico.png?id=20131018174500") 
0 0 no-repeat; 
} 

.lookbigicn { 
display: inline-block; 
width: 12px; 
height: 12px; 
background: 
url("http://img.t.sinajs.cn/t5/style/images/common/icon.png?id=1383027536816") 
-175px -25px no-repeat; 
vertical-align: -2px; 
margin-left: 20px; 
} 

.W_ico12 { 
display: inline-block; 
width: 12px; 
height: 12px; 
background: 
url("http://img.t.sinajs.cn/t5/style/images/common/icon.png?id=1383027536816") 
-175px 0px no-repeat; 
vertical-align: -2px; 
} 

.protoPic { 
position: absolute; 
display: inline-block; 
height: 30px; 
top: 10px; 
right: 50px; 
overflow: hidden; 
cursor: pointer; 
color: #F8F8F8; 
text-shadow: 0 1px 0 rgba(0, 0, 0, .5); 
} 

復(fù)制代碼代碼如下:

 
<p pic-choice style="display: none;"> 
<em class="W_ico12"></em><a href="javascript:;" id="hidePic">收起</a> 
<em class="lookbigicn"></em><a href="javascript:;" id="bigPic">查看大圖</a> 
</p> 

您可能感興趣的文章:

查看大圖

相關(guān)文章

jQuery的鏈?zhǔn)讲僮魇侨绾螌崿F(xiàn)的？為什么要用鏈?zhǔn)讲僮?？接下來會幫助大家解決這兩個問題，感興趣的朋友可以了解下
2013-01-01

jQuery獲取頁面及個元素高度、寬度的總結(jié)——超實用

這篇文章主要介紹了jQuery獲取頁面及個元素高度、寬度的總結(jié)——超實用,需要的朋友可以參考下

2015-07-07

Django中使用jquery的ajax進行數(shù)據(jù)交互的實例代碼

這篇文章主要介紹了Django中使用jquery的ajax進行數(shù)據(jù)交互的相關(guān)知識，非常不錯，具有參考借鑒價值 ,需要的朋友可以參考下

2017-10-10

非常實用的jQuery代碼段集錦【檢測瀏覽器、滾動、復(fù)制、淡入淡出等】

這篇文章主要介紹了非常實用的jQuery代碼段集錦,總結(jié)分析了包括jQuery檢測瀏覽器、滾動、復(fù)制、粘貼、淡入淡出等操作實現(xiàn)技巧,需要的朋友可以參考下

2019-08-08

jquery多行滾動/向左或向上滾動/響應(yīng)鼠標(biāo)實現(xiàn)思路及代碼

多行滾動jQuery循環(huán)新聞列表代碼包括以下功能:鼠標(biāo)滑上焦點圖時停止自動播放/滑出時開始自動播放以及判斷執(zhí)行橫向或縱向滾動,感興趣的朋友可以了解下哦

2013-01-01

jQuery數(shù)據(jù)類型小結(jié)(14個)

jQuery除了包含原生JS中的內(nèi)置數(shù)據(jù)類型(built-in datatype)，還包括一些擴展的數(shù)據(jù)類型(virtual types)，如Selectors、Events等，通過本文給大家分享14個jquery數(shù)據(jù)類型，感興趣的朋友一起學(xué)習(xí)吧

2016-01-01