Méthode JavaScript pour contrôler l'effet de réduction et d'expansion des compétences layer_javascript de page Web-js tutoriel-php.cn

Méthode JavaScript pour contrôler l'effet de réduction et d'expansion des compétences layer_javascript de page Web

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Libérer： 2016-05-16 16:04:02

original

1298 Les gens l'ont consulté

L'exemple de cet article décrit la méthode d'utilisation de JavaScript pour contrôler les effets de réduction et d'expansion de la couche de page Web. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

<!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>很酷的DIV层的展开收缩效果</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; //设置层展开的速度
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;//设置层收缩的速度
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>DIV层的展开隐藏效果</h1>
<span id="stateBut" onclick="$use()">展开</span>
<p id="class1content">曾经有一份真诚的爱情放在我面前， 
<br>我没有珍惜，<br>等我失去的时候我才后悔莫及，
<br>人世间最痛苦的事莫过于此。
<br>如果上天能够给我一个再来一次的机会，
<br>我会对那个女孩子说三个字：<br>我爱你。
<br>如果非要在这份爱上加上一个期限，
<br>我希望是……一万年！”
</div>
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.