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 相关文章推荐
javascript 图片裁剪技巧解读
Nov 15 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 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
关于PHP实现异步操作的研究
2013/02/03 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
Python处理session的方法整理
2019/08/29 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
Python必须了解的35个关键词
2020/07/16 Python
python中Django文件上传方法详解
2020/08/05 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
物业管理公司实习生自我鉴定
2013/09/19 职场文书
商场中秋节广播稿
2014/01/17 职场文书
销售主管岗位职责
2014/02/08 职场文书
产品质量保证书
2014/04/29 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
给学校建议书范文
2014/05/13 职场文书
大学专科求职信
2014/07/02 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python