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 相关文章推荐
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 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
一段php加密解密的代码
2007/07/16 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
python logging添加filter教程
2019/12/24 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
建筑工程专业学生的自我评价
2013/12/25 职场文书
对公司合理化的建议书
2014/03/12 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
师德师风学习材料
2014/12/19 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
python获取带有返回值的多线程
2022/05/02 Python
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python