Heim > Artikel > Web-Frontend > Beispielcode-Anzeige zum Anzeigen eines Teils einer versteckten Webseite
Beispielcode-Anzeige zum Anzeigen eines Teils einer versteckten Webseite
- 伊谢尔伦Original
- 2017-06-16 10:49:242696Durchsuche
Der Webseiten-Spezialeffekt, einen Teil des Inhalts einer ausgeblendeten Webseite anzuzeigen, wird vollständig mithilfe von CSS erreicht. Das Prinzip besteht darin, DIVs anzuzeigen und auszublenden. Es ist sehr einfach, aber die Wirkung ist gut.
<html>
<head>
<title>div动画显示cnn6.net??网页特效代码</title>
<style>
* { margin:0; padding:0;}
body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;}
h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#333; padding:3px; display:block; color:#99CC00}
.class1 { width:40%; background:#CCC; position:relative; margin:0 auto; padding:5px;}
span { position:absolute; right:10px; top:8px; cursor:pointer; color:yellow;}
p { text-align:left; line-height:20px; background:#333; padding:3px; margin-top:5px; color:#99CC00}
#class1content { height:300px;overflow:hidden}
</style>
<script>
function $(element){
return element = document.getElementById(element);
}
function $D(){
var d=$('class1content');
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h+=50; //设置层展开的速度cnn6.net??
if(h>=maxh){
d.style.height='300px';
clearInterval(iIntervalId);
}else{
d.style.display='block';
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $D2(){
var d=$('class1content');
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h-=50;//设置层收缩的速度cnn6.net??
if(h<=0){
d.style.display='none';
clearInterval(iIntervalId);
}else{
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $use(){
var d=$('class1content');
var sb=$('stateBut');
if(d.style.display=='none'){
$D();
sb.innerHTML='展开';
}else{
$D2();
sb.innerHTML='收缩';
}
}
</script>
</head>
<body>
<div class="class1">
<h1>Alone展开隐藏效果</h1>
<span id="stateBut" onclick="$use()">展开</span>
<p id="class1content">小蜗牛问妈妈：为什么我们从生下来，就要背负这个又硬又重的壳呢？<br />
妈妈：因为我们的身体没有骨cnn6.net??骼的支撑，只能爬，又爬不快。所以要这个壳的保护！<br />
小蜗牛：毛虫姊姊没有骨头，也爬不快，为什么她却不用背这个又硬又重的壳呢？ <br />
妈妈：因为毛虫姊姊能变成蝴蝶，cnn6.net??天空会保护她啊。 <br />
小蜗牛：可是蚯蚓弟弟也没骨头爬不快，也不会变成蝴蝶他什么不背这个又硬又重的壳呢？ <br />
妈妈：因为蚯蚓弟弟会钻土, 大地会保护他啊。 <br />
小蜗牛哭了起来：cnn6.net??我们好可怜，天空不保护，大地也不保护。 <br />
蜗牛妈妈安慰他：所以我们有壳啊！我们不靠天，也不靠地，我们靠自己。</p>
</div>
</body>Das obige ist der detaillierte Inhalt vonBeispielcode-Anzeige zum Anzeigen eines Teils einer versteckten Webseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung häufig verwendeter regulärer js- und jquery-AusdrückeNächster Artikel：Zusammenfassung häufig verwendeter regulärer js- und jquery-Ausdrücke