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中的常用事件总结
Dec 27 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
Python正则表达式完全指南
2017/05/25 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
销售部主管岗位职责
2013/12/18 职场文书
优秀士兵个人事迹材料
2014/01/19 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
vue里使用create, mounted调用方法
2022/04/26 Vue.js