一個簡單的全屏圖片上下打開顯示網(wǎng)頁效果示例
更新時(shí)間：2014年07月08日 11:50:31 投稿：whsnow
這是一個簡單的全屏圖片上下打開顯示網(wǎng)頁效果，源碼如下，喜歡的朋友可以練練手
上源碼看效果：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
margin: 0;
padding: 0;
}
.wrap {
overflow: hidden;
position: fixed;
z-index: 99999;
width: 100%;
top: 0;
left: 0;
}
.div {
overflow: hidden;
position: absolute;
width: 100%;
}
.d {
background: url(1.jpg) center center no-repeat;
height: 100%;
}
</style>
</head>
<body>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<p>這是網(wǎng)站內(nèi)容</p>
<div class="wrap">
<div id="d1" class="div">
<div class="d"></div>
</div>
<div id="d2" class="div">
<div class="d"></div>
</div>
</div>
<script src="jquery-1.8.3.min.js"></script>
<script>
var h = $(window).height();
var h1 = h / 2;
$('#d1,#d2').height(h1);
$('.wrap,.d').height(h);
$('#d2').css('top', h1);
$('#d2 .d').css('margin-top', -h1);
setTimeout(function () {
$('#d1').animate({ 'top': -h / 2 }, 3000);
$('#d2').animate({ 'top': h }, 3000, function () {
$('.wrap').remove();
});
}, 2000);//一定時(shí)間后打開，1000=1秒
</script>
</body>
</html>
相關(guān)文章
利用了jquery的ajax實(shí)現(xiàn)二級聯(lián)互動菜單
二級聯(lián)互動菜單，利用了jquery的ajax實(shí)現(xiàn)，具體實(shí)現(xiàn)如下，喜歡的朋友可以參考下2013-12-12
這篇文章主要為大家詳細(xì)介紹了js注冊時(shí)輸入合法性驗(yàn)證方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
這篇文章主要介紹了JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()的相關(guān)資料,需要的朋友可以參考下2016-08-08
本篇文章主要介紹了JS敏感詞過濾實(shí)例，詳細(xì)的介紹了兩種方法，RegExp（），replace（），具有一定的參考價(jià)值，有興趣的可以了解一下。2016-12-12
Javascript & DHTML DOM基礎(chǔ)和基本API
DOM是文檔對象模型(Document Object Model，是基于瀏覽器編程（在本教程中，可以說就是DHTML編程）的一套API接口，W3C出臺的推薦標(biāo)準(zhǔn)，每個瀏覽器都有一些細(xì)微的差別，其中以Mozilla的瀏覽器最與標(biāo)準(zhǔn)接近。2008-07-07
早該知道的7個JavaScript技巧，有了這7個JavaScript技巧，事半功倍，感興趣的小伙伴們可以參考一下2016-06-06
bootstrap實(shí)現(xiàn)二級下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了bootstrap實(shí)現(xiàn)二級下拉菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
實(shí)現(xiàn)div滾動條默認(rèn)最底部以及默認(rèn)最右邊的示例代碼
下面小編就為大家分享一篇實(shí)現(xiàn)div滾動條默認(rèn)最底部以及默認(rèn)最右邊的示例代碼，代碼非常簡潔，具有很好的參考價(jià)值，希望對大家有所幫助2017-11-11
小程序從手動埋點(diǎn)到自動埋點(diǎn)的實(shí)現(xiàn)方法
這篇文章主要介紹了小程序從手動埋點(diǎn)到自動埋點(diǎn)的實(shí)現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)微博發(fā)布功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08