简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
JS はページの高さをどのように制御して、ページを表示するかどうかを決定しますか?
2018-03-05 17:13:36
0
2
1482
<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title>sdfsd</title>    
		<style type="text/css">    
			.demo{    
				width: 100%;    
				height: 500px;    
				overflow: hidden;    
				position: relative;    
			}    
			.art_show{    
				position: absolute;    
		z-index: 900;    
		bottom: 0;    
		margin: 0;    
		padding: 0;    
		width: 100%;    
		height: 50px;    
		border-bottom: 60px solid #f9f9f9;    
		background-image: linear-gradient(hsla(0,0%,100%,0),#f9f9f9);    
		color: #1c6bcc;    
		text-align: center;    
		line-height: 170px;    
			}    
			.pull{    
				position: absolute;    
				width: 16px;    
				left: 50%;    
				top: 54px;    
				margin-left: -8px;    
			}    
		</style>    
	</head>    
	<body>    
		<div class="demo">    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p><p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<div class="art_show"><img src="pull.png" class="pull" />展开全文</div>    
		</div>    
		<script src="jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>    
		<script type="text/javascript">    
			$(".art_show").click(function(){    
				$(".demo").css({"height":"auto"});    
				$(".art_show").css({"display":"none"});    
			})    
		</script>    
	</body>    
</html>

デモの高さが 500 未満の場合、JS を介してデモを制御する方法は現実的ではありません。全文をお読みください。 。 。 。 。 。

全員に返信(2)
2018-03-05 17:44:59 2棟

りー


いいねを押す +0
返信を追加
2018-03-05 17:15:47 1棟

補足：デモの高さが500px未満の場合、全文は拡大表示されません。 。 。 。 。 。

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！