基于jquery實(shí)現(xiàn)的圖片在各種分辨率下未知的容器內(nèi)上下左右居中
更新時(shí)間:2014年05月11日 12:33:04 作者:
這篇文章主要介紹了基于jquery實(shí)現(xiàn)的圖片在各種分辨率下未知的容器內(nèi)上下左右居中的方法,需要的朋友可以參考下
DIV:
復(fù)制代碼 代碼如下:
<div class="pic_conent">
<div class=" fn-pr pic_layer">
<!--圖片文字介紹透明層-->
<section class="bg text_layer_home p10 font-yahei fn-bc">
<h2 class="f14 fefefe">${pic.desc}</h2>
<aside class="f12 bbb">
<c:if test="${not empty pic.poi}">
<span class="scenery fn-fl">${pic.poi}</span>
</c:if>
<span class="fn-fr mt10">by ${pic.username}</span>
</aside>
</section>
<img src="${pic.picUrl}" width="320" height="420" />
</div>
</div>
CSS:
復(fù)制代碼 代碼如下:
.pic_conent{
height: 720px;/*這個(gè)高度會(huì)被js改掉*/
text-align: center;
display: table-cell;
vertical-align: middle;
}
.pic_layer{text-align:center; width:100%; display:inline-block; vertical-align:middle;}
jquery:
復(fù)制代碼 代碼如下:
$(function() {
var surH = $(window).height();
$(".pic_conent").height(surH);
window.onresize=function(){
var surH = $(window).height();
$(".pic_conent").height(surH);
}
您可能感興趣的文章:
相關(guān)文章
JQuery 綁定事件時(shí)傳遞參數(shù)的實(shí)現(xiàn)方法
JQuery 綁定事件時(shí)傳遞參數(shù)的實(shí)現(xiàn)方法,需要的朋友可以參考下。2009-10-10基于jQuery的倒計(jì)時(shí)實(shí)現(xiàn)代碼
昨天看了妙味課堂的倒計(jì)時(shí)視頻,自己學(xué)著寫(xiě)了下,需要的朋友可以參考下2012-05-05jQuery對(duì)象和DOM對(duì)象的相互轉(zhuǎn)化實(shí)現(xiàn)代碼
jQuery對(duì)象就是通過(guò)jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery對(duì)象是jQuery獨(dú)有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;例如$("#img").attr("src","test.jpg"); 這里的$("#img")就是jQuery對(duì)象;2010-03-03瀑布流布局并自動(dòng)加載實(shí)現(xiàn)代碼
Pinterest使用一種新的方式布局取得成功之后,們把他叫做瀑布流,國(guó)內(nèi)現(xiàn)有美麗說(shuō),蘑菇街,花瓣等代表的網(wǎng)站接下來(lái)為你介紹一個(gè)juqery的插件masonry的使用,感興趣的你可以參考下哈2013-03-03jquery實(shí)現(xiàn)簡(jiǎn)單的swiper輪播預(yù)覽原圖
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的swiper輪播預(yù)覽原圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02