Rumah > Artikel > hujung hadapan web > 显示隐藏网页部分内容的示例代码展示

显示隐藏网页部分内容的示例代码展示

伊谢尔伦asal: 2017-06-16 10:49:242751semak imbas

显示隐藏网页部分内容网页特效，完全是用CSS实现的效果，原理就是显示隐藏DIV。很简单，但是效果不错，希望大家喜欢。

<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=$(&#39;class1content&#39;);
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h+=50; //设置层展开的速度cnn6.net??
if(h>=maxh){
d.style.height=&#39;300px&#39;;
clearInterval(iIntervalId);
}else{
d.style.display=&#39;block&#39;;
d.style.height=h+&#39;px&#39;;
}
}
iIntervalId=setInterval(dmove,2);
}
function $D2(){
var d=$(&#39;class1content&#39;);
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h-=50;//设置层收缩的速度cnn6.net??
if(h<=0){
d.style.display=&#39;none&#39;;
clearInterval(iIntervalId);
}else{
d.style.height=h+&#39;px&#39;;
}
}
iIntervalId=setInterval(dmove,2);
}
function $use(){
var d=$(&#39;class1content&#39;);
var sb=$(&#39;stateBut&#39;);
if(d.style.display==&#39;none&#39;){
$D();
sb.innerHTML=&#39;展开&#39;;
}else{
$D2();
sb.innerHTML=&#39;收缩&#39;;
}
}
</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>

Atas ialah kandungan terperinci 显示隐藏网页部分内容的示例代码展示. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：常用js和jquery正则表达式大全汇总Artikel seterusnya：用JavaScrip正则表达式验证form表单的方法

Artikel berkaitan

Lihat lagi