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 相关文章推荐
常用js字符串判断方法整理
Oct 18 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
js实现搜索栏效果
Nov 16 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
如何在JavaScript中等分数组的实现
Dec 13 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判断是否为json格式的方法
2014/03/04 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
python 默认参数相关知识详解
2019/09/18 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
找到不普通的东西:Bonanza
2016/10/20 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
安全生产管理合理化建议书
2014/03/12 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
企业法律事务工作总结
2015/08/11 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
tree shaking对打包体积优化及作用
2022/07/07 Java/Android