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 相关文章推荐
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
js密码强度检测
Jan 07 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
JS通用方法触发点击事件代码实例
Feb 17 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 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
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
python迭代器与生成器详解
2016/03/10 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
python在文本开头插入一行的实例
2018/05/02 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
Python单元测试与测试用例简析
2019/11/09 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
异步传递消息系统的作用
2016/05/01 面试题
项目计划书范文
2014/01/09 职场文书
校本教研工作方案
2014/01/14 职场文书
会走路的树教学反思
2014/02/20 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
学位证书委托书
2014/09/30 职场文书
2014年招生工作总结
2014/11/26 职场文书
python字典的元素访问实例详解
2021/07/21 Python