JavaScript控制网页层收起和展开效果的方法


Posted in Javascript onApril 15, 2015

本文实例讲述了JavaScript控制网页层收起和展开效果的方法。分享给大家供大家参考。具体如下:

<!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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
来自qq的javascript面试题
Jul 24 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 Javascript
简单实现node.js图片上传
Dec 18 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
vue中@change兼容问题详解
Oct 25 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 Javascript
JS扩展方法实例分析
Apr 15 #Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 #Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 #Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 #Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 #Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 #Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 #Javascript
You might like
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
JS 自动安装exe程序
2008/11/30 Javascript
JS option location 页面跳转实现代码
2008/12/27 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
Python群发邮件实例代码
2014/01/03 Python
linux 下实现python多版本安装实践
2014/11/18 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
python抖音表白程序源代码
2019/04/07 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
python dataframe NaN处理方式
2019/12/26 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
大学生实习期自我评价范文
2013/10/03 职场文书
运动会稿件200字
2014/02/07 职场文书
高考备战决心书
2014/03/11 职场文书
协议书范本
2014/04/23 职场文书
给老婆的保证书范文
2014/04/28 职场文书
永远是春天观后感
2015/06/12 职场文书
感恩教师节主题班会
2015/08/12 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis