JS实现超简单的仿QQ折叠菜单效果


Posted in Javascript onSeptember 21, 2015

本文实例讲述了JS实现超简单的仿QQ折叠菜单效果。分享给大家供大家参考。具体如下:

这是一款经过精简后的仿QQ折叠菜单代码,以前发过的,不过这个是经过几轮代码精简后的一个版本,而且在各浏览器下的表现也很不错,兼容性没出问题。

运行效果截图如下:

JS实现超简单的仿QQ折叠菜单效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>SlideView 滑动展示效果</title>
</head>
<body>
<style type="text/css">
.sv3 dl, .sv3 dt, .sv3 dd{ padding:0; margin:0; }
.sv3 {
 width:240px;
 border:1px solid #BFC7D9;
}
.sv3 dl {
 width:240px;
 height:380px;
 background:#EDF5FF;
  overflow:hidden;
}
.sv3 dt {
 padding:5px 10px;
 height:13px;
 font-size:13px;
 color:#000;
 background:#E5ECF9;
 border-top:1px solid #fff;
 border-bottom:1px solid #BFC7D9;
}
.sv3 dl.on dt {
 background:#3366CC;
 color:#FFF;
 font-weight:bold;
}
.sv3 dd {
 padding:10px;
 color:#333;
 font-size:12px;
 line-height:1.5em;
}
.sv3 dd a:link,
.sv3 dd a:visited,
.sv3 dd a:hover,
.sv3 dd a:active { color:#333; display:block; text-align:right;}
</style>
<div id="idSlideView3" class="sv3">
 <dl>
  <dt>我的好友 </dt>
  <dd> 张三 </dd>
  <dd> 王五 </dd>
 </dl>
 <dl>
  <dt> 业务联系 </dt>
  <dd> 李经理 </dd>
 </dl>
 <dl>
  <dt> 家人 </dt>
  <dd> 爸爸 </dd>
  <dd> 妈妈 </dd>
 </dl>
 <dl>
  <dt> 同事 </dt>
  <dd> 小赵</dd>
 </dl>
 <dl>
  <dt> 讨厌的人 </dt>
  <dd> 梅朝风 </dd>
 </dl>
</div>
<script>
function SlideView(e,a){
 for(var i=0,o=document.getElementById(e).getElementsByTagName('DL'),d;d=o[i++];)(function(e,c,m,s,t,k,h){
  (s=e.style).height=(h=23)+"px";
  e.onmouseover=function (){ t=setTimeout(e.open,200); }
  e.onmouseout=function (){ clearTimeout(t);}
  e.open=function(){
   if (a==e)return;
   c(k); a&&a.close();
   (a=e).className="on";
   k=m(function(){ if(h>379)c(k); else s.height=(h=Math.min(h+30, 380))+"px"; }, 10);
  }
  e.close = function(){
   c(k); e.className="";
   k=m(function(){ if(h<24)c(k); else s.height = (h=Math.max(h-30, 23))+"px"; }, 10);
  }
 })(d,clearInterval,setInterval);
 o[0].open();
}
new SlideView( "idSlideView3");
</script>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
jQuery的position()方法详解
Jul 19 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 #Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 #Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 #Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 #Javascript
jquery+正则实现统一的表单验证
Sep 20 #Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 #Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 #Javascript
You might like
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
Python的设计模式编程入门指南
2015/04/02 Python
Python 中 Meta Classes详解
2016/02/13 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
JAVA程序员面试题
2012/10/03 面试题
学校安全生产承诺书
2014/05/23 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS
js 实现验证码输入框示例详解
2022/09/23 Javascript