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的并行运算实现代码
Nov 19 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
Node.js操作系统OS模块用法分析
Jan 04 Javascript
js尾调用优化的实现
May 23 Javascript
vue制作抓娃娃机的示例代码
Apr 17 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 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
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
Symfony控制层深入详解
2016/03/17 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
javascript的BOM
2016/05/03 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
python实现发送邮件功能
2017/07/22 Python
Puppeteer使用示例详解
2019/06/20 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
统计员岗位职责
2013/11/14 职场文书
承办会议欢迎词
2014/01/17 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
高中生操行评语大全
2014/04/25 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
mysql全面解析json/数组
2022/07/07 MySQL