コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

全画面画像を上下に開いて Web ページを表示する効果の簡単な例_JavaScript スキル

WBOY
リリース： 2016-05-16 16:42:15
オリジナル
3277 人が閲覧しました

ソース コードに移動して効果を確認してください: 

<!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>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</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);//一定时间后打开，1000=1秒

</script>
</body>
</html>
ログイン後にコピー
関連ラベル：
全画面表示 写真
ソース：php.cn
前の記事：Linux_node.js 上で Node.js プロジェクトの自動起動を実装するには、forever を使用します。 次の記事：よく使用される jQuery selectors_jquery のまとめ
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
MySQL でグループ化してカウントするにはどうすればよいですか? 友人に送信され、削除されていないメッセージの合計数を抽出するクエリを作成しようとしています。これはテーブル構造のスクリーンショットです。 達成したい出力は次のとおりです。 idme...
から 2024-04-06 18:30:17
0
1
353
Android 上の React-Native でステータス更新が機能しない スワイプ可能な水平ギャラリーに画像のペアを含むコードがいくつかあります。両方の画像の上部をクリックすると、画像がオフに切り替わるはずです。そのため、私が行ったのは、isImage2...
から 2024-04-06 16:54:10
0
1
410
hr タグが単色白に設定されているのに半透明になるのはなぜですか? HTML（ブートストラップ付き）とCSSがあり、HTMLにはクラスを持つ<hr>タグがあり、CSSにはその境界線スタイルがあります。半透明で白い色は見えますが、「固体」...
から 2024-04-06 16:13:26
0
1
500
クリア後​​も自分のファイル入力の値が残る スクリーンショットでわかるように。ファイルを選択し、ページを更新せずにポップアップを保持し、再度開くと、ファイル入力は選択したファイルのままです。 <inputid=&quo...
から 2024-04-06 15:44:52
0
1
384
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート