Js动画提示层，可合拢伸开的JS层效果_网页布局

Js动画提示层，可合拢伸开的JS层效果: 发布时间：2020-09-02编辑：脚本学堂

Js动画提示层，可合拢伸开的JS层效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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; <a href=http://www.jb200.com/article/15092.html target=_blank class=infotextkey>line-height</a>: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><a href="http://www.jb200.com"><a href=http://www.jb200.com/jb/ target=_blank class=infotextkey>脚本</a>学习网</a></h1>
<span id="stateBut" onclick="$use()">展开</span>
<p id="class1content">爱情这东西 没道理的 有人很抢手 有人没资格 路是人走的 我害怕什么<br>
大不了 别爱了她像个天仙 她太美了 我那么平凡 我开不了口 心里面晓得 追她的结果 幸运的 不是我
我没那种命呀 她没道理爱上我 英雄和美人哪 是一国的 只怪爱人太少了 对手太好了劝自己别傻了以前甭提了 以后非加油不可
我没那种命呀 轮也不会轮到我 爱情老是缺货 我争什么 时间越来越少了 越来越老了我剩下一个梦 她走过来说 其实我错了
她爱我
</p>
</div>
</body>
</html>

提示：可修改代码后再运行!

上一篇：jQuery滚动层，仿QQ在线客服
下一篇：纯CSS3做的Logo效果

与 Js动画提示层，可合拢伸开的JS层效果有关的文章

本文标题：Js动画提示层，可合拢伸开的JS层效果
本页链接：http://www.jb200.com/tx/55.html

浏览排行

栏目分类

热点文章

Js动画提示层，可合拢伸开的JS层效果