JS+CSS实现DIV层的展开、收缩效果


Posted in Javascript onJanuary 28, 2016

本文为大家分享的第一个实例:JS控制DIV层的展开、收缩效果。

<html>
<head>
<title>CSS+JS实现一个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:#555; padding:3px; display:block; color:#99CC00}
.class1 { width:40%; background:#CCCCCC; 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:#555; padding:3px; margin-top:5px; color:#99CC00}
#class1content { height:256px;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">
<span id="stateBut" onclick="$use()">收缩</span>
<p id="class1content">三水点靠木。
</p>
</div>
</body>

效果图:

JS+CSS实现DIV层的展开、收缩效果

第二个实例:js 控制展开折叠

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
  <title>Title</title>
</head>
<body>
<!-- js 控制 展开 隐藏div -->
<img src="image/down.png" onclick="test(this)">  <!--this 指 img 对象 -->

<div id="div2" style="border:1px solid #ccc; width:300px; height:200px; display: block;">
  (1)每个HTML标记都有事件句柄属性。onClick是HTML标记属性,不分大小写。
  (2)HTML标记对应的元素对象也具有事件句柄属性,这个属性必须全小写,因JS区分大小写
</div>
</body>
</html>
<script type="text/javascript">
function test(obj){

  var div1=document.getElementById("div2");
  if(div1.style.display=="block"){
    div1.style.display="none";
    obj.src="image/up.png";
  }else{
    div1.style.display="block";
    obj.src="image/down.png";
  }
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
angularJS 中input示例分享
Feb 09 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
webstorm添加*.vue文件支持
May 08 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
js+canvas绘制五角星的方法
Jan 28 #Javascript
js+html5实现的自由落体运动效果代码
Jan 28 #Javascript
js判断上传文件后缀名是否合法
Jan 28 #Javascript
Angular中$compile源码分析
Jan 28 #Javascript
实例讲解JS中setTimeout()的用法
Jan 28 #Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 #Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 #Javascript
You might like
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
PHP加密解密实例分析
2015/12/25 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
js截取函数(indexOf,join等)
2010/09/01 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
python 异常处理总结
2016/10/18 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
python实现图片彩色转化为素描
2019/01/15 Python
django+echart数据动态显示的例子
2019/08/12 Python
Python配置文件处理的方法教程
2019/08/29 Python
python提取xml里面的链接源码详解
2019/10/15 Python
关于numpy数组轴的使用详解
2019/12/05 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
python中adb有什么功能
2020/06/07 Python
python下载的库包存放路径
2020/07/27 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
python help函数实例用法
2020/12/06 Python
python 数据类型强制转换的总结
2021/01/25 Python
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
环保专项行动方案
2014/05/12 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
农村老人去世追悼词
2015/06/23 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python