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 相关文章推荐
jQuery maxlength文本字数限制插件
Apr 16 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
event.srcElement 用法笔记e.target
2009/12/18 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
javascript如何实现create方法
2019/11/04 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
python实现在IDLE中输入多行的方法
2018/04/19 Python
Python hashlib模块用法实例分析
2018/06/12 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
eclipse创建python项目步骤详解
2019/05/10 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
浅析python连接数据库的重要事项
2021/02/22 Python
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
2015年出纳年终工作总结
2015/05/14 职场文书
学校运动会感想
2015/08/10 职场文书
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL