脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS超简单仿QQ折叠菜单

JS实现超简单的仿QQ折叠菜单效果

 更新时间：2015年09月21日 09:27:42   作者：企鹅  
这篇文章主要介绍了JS实现超简单的仿QQ折叠菜单效果,可实现鼠标滑过列表展开的QQ折叠菜单效果,非常简单实用,需要的朋友可以参考下

本文实例讲述了JS实现超简单的仿QQ折叠菜单效果。分享给大家供大家参考。具体如下：

这是一款经过精简后的仿QQ折叠菜单代码，以前发过的，不过这个是经过几轮代码精简后的一个版本，而且在各浏览器下的表现也很不错，兼容性没出问题。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-simple-f-qq-zd-style-menu-codes/

具体代码如下：

<!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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 获取table中的rowIndex和cellIndex

    获取table中的rowIndex和cellIndex

    获取table中的rowIndex和cellIndex...
    2006-12-12
  • Webpack如何引入bootstrap的方法

    Webpack如何引入bootstrap的方法

    本篇文章主要介绍了Webpack如何引入bootstrap的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • js的对象与函数详解

    js的对象与函数详解

    今天小编就为大家分享一篇关于js的对象与函数详解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-01-01
  • BootStrap Table对前台页面表格的支持实例讲解

    BootStrap Table对前台页面表格的支持实例讲解

    bootstrap-table是在bootstrap的基础上面做了一些封装，所以在使用bootstrap-table之前要导入的js和css，下面通过本文给大家详细介绍需要引入的文件，对bootstrap table 表格感兴趣的朋友一起看看吧
    2016-12-12
  • 情人节专属 纯js脚本1k大小的3D玫瑰效果

    情人节专属 纯js脚本1k大小的3D玫瑰效果

    用代码做出的玫瑰花，这才是牛逼程序员送给女友的最好情人节礼物呢
    2012-02-02
  • js实现签到日历

    js实现签到日历

    这篇文章主要为大家详细介绍了js实现签到日历，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】

    微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】

    这篇文章主要介绍了微信小程序使用slider设置数据值及switch开关组件功能,结合实例形式分析了slider组件及switch组件的功能与使用方法,并附带源码供读者下载参考,需要的朋友可以参考下
    2017-12-12
  • js 实现css风格选择器（压缩后2KB）

    js 实现css风格选择器（压缩后2KB）

    近日在做一些OA前端界面，为了更好管理页面代码想写个js选择器，写着写着发现很费力，索性在网上找找看，功夫不负有心人， 找到一个mini css选择器，且性能不凡：以下代码是压缩后的，仅2KB
    2012-01-01
  • js实现返回顶部效果

    js实现返回顶部效果

    本文主要介绍了js实现返回顶部效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 通用无限极下拉菜单的实现代码

    通用无限极下拉菜单的实现代码

    下面小编就为大家带来一篇通用无限极下拉菜单的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05

最新评论