JavaScript method of controlling the effect of page layer collapse and expansion

  • 2020-05-30 19:21:48
  • OfStack

This article describes the example of JavaScript control web page layer collapse and expand the effect of the method. Share with you for your reference. The details are as follows:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">  
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<title> cool DIV Layer expansion and contraction effect </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; // Sets the speed at which the layer is expanded 
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;// Set the rate at which the layer contracts 
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=' shrinkage ';
}else{
$D2();
sb.innerHTML=' an ';
}
}
</script>
</head>
<body>
<div class="class1">
<h1>DIV Layer expansion to hide the effect </h1>
<span id="stateBut" onclick="$use()"> an </span>
<p id="class1content"> There used to be 1 True love lies before me,  
<br> I didn't cherish, <br> When I lost it I was too late to repent, 
<br> Nothing in the world is more painful than this. 
<br> If god could give it to me 1 A come back 1 Second chance, 
<br> I'll say to the girl 3 A word: <br> I love you. 
<br> If you must add in this love 1 A time limit, 
<br> I hope it's... 1 Ten thousand years!" 
</div>
</body>
</html>

I hope this article has been helpful to your javascript programming.


Related articles: