創建全屏背景的jQuery插件:FullScreenBg

jopen 10年前發布 | 12K 次閱讀 jQuery Ajax框架 FullScreenBg

這是一個很小的jQuery插件,用于創建全屏背景。

<div class="media-crop">
    <div class="crop">
        <img src="http://placekitten.com/300/220">
    </div>
</div>

html, body {
    width: 100%;
    height: 100%;
}

.media-crop {
    display: block;
    position: relative;
    width: 300px;
    height: 200px;
    margin: 0;
    padding: 0;
    background: #f2f2f2;
    overflow: hidden;
}

.media-crop .crop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.media-crop img,
.media-crop video,
.media-crop iframe {
    display: none;
}

$(".crop").fullscreenbg();

項目主頁:http://www.baiduhome.net/lib/view/home/1414223649231

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!