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实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
详解jQuery事件
Jan 13 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
vue之debounce属性被移除及处理详解
Nov 13 Javascript
微信小程序实现图片压缩
Dec 03 Javascript
vue实现购物车选择功能
Jan 10 Javascript
js实现页面导航层级指示效果
Aug 25 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实现两个数组相加的方法
2015/02/17 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
理解javascript回调函数
2014/12/28 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
js实现小星星游戏
2020/03/23 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
python单链表实现代码实例
2013/11/21 Python
python抓取京东商城手机列表url实例代码
2013/12/18 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
大学生个人求职信范文
2013/09/21 职场文书
迟到检讨书400字
2014/01/13 职场文书
母亲节感恩寄语
2014/02/21 职场文书
违反交通法规检讨书
2014/09/10 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
厉行节约工作总结
2015/08/12 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
详解MySQL 用户权限管理
2021/04/20 MySQL
一文简单了解MySQL前缀索引
2022/04/03 MySQL