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 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
在linux中使用包管理器安装node.js
Mar 13 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
基于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执行速度全攻略
2006/10/09 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
javascript 动态添加表格行
2006/06/22 Javascript
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
python 实现线程之间的通信示例
2020/02/14 Python
Python Json数据文件操作原理解析
2020/05/09 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
《三峡》教学反思
2014/03/01 职场文书
计算机实训报告范文
2014/11/05 职场文书
企业安全生产检查制度
2015/08/06 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技