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 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
dess中一个简单的多路委托的实现
Jul 20 Javascript
jquery插件制作简单示例说明
Feb 03 Javascript
JS简单计算器实例
Jan 20 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
Joomla开启SEF的方法
2016/05/04 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
JavaScript中的对象化编程
2008/01/16 Javascript
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
微信运维交互机器人的示例代码
2018/11/12 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
python实现代码统计程序
2019/09/19 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
求职推荐信
2013/10/28 职场文书
自荐信要包含哪些内容
2013/11/06 职场文书
实习生求职自荐信
2014/02/07 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
小学生运动会报道稿
2014/09/12 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
吴仁宝观后感
2015/06/09 职场文书
公司老总年会致辞
2015/07/30 职场文书