QQ菜单

最新推荐文章于 2021-05-27 00:26:18 发布
最新推荐文章于 2021-05-27 00:26:18 发布
阅读量146 收藏
点赞数
分类专栏： JS 文章标签： qq function class xhtml html border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zx_values/article/details/5431117
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

下拉滚动门

</title>

<style type="text/css">

body{

 margin:10px;

 padding:10px;

}

body,td,div,span,li{

 font-size:12px;

}

.title01,.title02{

 color:#fff;

 font-weight:bold;

}

#DoorP{

 border:12px solid #eee;

 width:150px;

 height:300px;

 padding:4px;

 background:#fff;

}

.title01{

 width:100%;

 height:25px;

 background:#00ccff;

 cursor:pointer;

}

.title02{

 width:100%;

 height:25px;

 background:#99cc00;

 cursor:pointer;

}

.content{

 background:#eee;

 border-bottom:2px solid #fff;

 overflow:hidden;

 color:#666;

 padding-left:4px;

 padding-right:4px;

 line-height:18px;

}

</style>

<!--

棕：#eee;

蓝：#00ccff;

绿：#99cc00;

-->

</head>

<body>

<div id="DoorP">

 <table>

  <tr>

   <td>

     第一层信息

   </td>

  </tr>

 </table>

 <div class="content">

  十三妖<br/>

  十三妖<br/>

  十三妖<br/>

 </div>

 <table>

  <tr>

   <td>

    第二层信息

   </td>

  </tr>

 </table>

 <div class="content">

  ThirdteenDevil

 </div>

 <table>

  <tr>

   <td>

    第三层信息

   </td>

  </tr>

 </table>

 <div class="content">

  devil13th

 </div>

</div>

<script type="text/javascript">

 var open = 2;// 设置初始打开的层序号

 var openState = new Array();

 var closeState = new Array();

 var dH = 220;

 function $(id){

  if(document.getElementById(id))

  {

   return document.getElementById(id);

  }

  else

  {

   alert("没有找到!");

  }

 }

 function $tag(id,tagName){

  return $(id).getElementsByTagName(tagName)

 }

 function closeMe(Cid,Oid){    

  var h = parseInt(Ds[Cid].style.height);

  //alert(h);

  if(h > 0)

  {

   h = h - Math.ceil(h/3);    

   Ds[Cid].style.height = h+"px";

  }

  else

  {  

 

   openMe(Oid);

   clearTimeout(closeState[Cid]);

   return false;

  }

  closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")");

 }

 function openMe(Oid){

  var h = parseInt(Ds[Oid].style.height);  

  //alert(h);

  if(h < dH)

  {

   h = h + Math.ceil((dH-h)/3);    

   Ds[Oid].style.height = h+"px";

  }

  else

  {  

   clearTimeout(openState[Oid]);   

   return false;

  }

  openState[Oid] = setTimeout("openMe("+Oid+")");

 }

 var Ds = $tag("DoorP","div");

 var Ts = $tag("DoorP","table");

 if(Ds.length != Ts.length)

 {

  alert("标题和内容数目不相同!");

 }

 

 for(var i = 0 ; i < Ds.length ; i++)

 {  

  if(i==open)

  {

   Ds[i].style.height = dH+"px";

   Ts[i].className="title01";

  }

  else

  {

   Ds[i].style.height = "0px";

   Ts[i].className="title02";

  }

  Ts[i].value = i;

  Ts[i].onclick = function(){

   if(open==this.value)

   {

    return false;

   }

   Ts[open].className="title02";

   Ts[this.value].className="title01";

   for(var i = 0 ; i < openState.length ; i++)

   {

    clearTimeout(openState[i]);

    clearTimeout(closeState[i]);

   }

   closeMe(open,this.value);

   //openMe(this.value);

   open = this.value;

  }

 } 

 //直接打开层函数

 function showDiv(id){  

  Ds[id].style.height=dH+"px";

  Ds[open].style.height="0px";

  open = id;

 }

 //渐渐打开层函数

</script>

</body>

</html>

本代码由<a href=http://www.qpsh.com>网页特效网</a>提供

zx_values
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt 实现 QQ 9.0版 自定义菜单控件
前行之路还需前行
05-18 4265
简述 重新最近开始了QQ最新版 9.0 界面的模仿，前几天搞了一个QQ登陆界面的动画效果详情见 QQ 9.0 新版登录窗口登录特效 ，今晚Qt技术学习班分享了QQ 9.0版本的自定义菜单控件，通过QListWidget 来承载 每个菜单项，通过简单的组合完成菜单项控件，主要如下： 1、自动设置菜单高度，根据当前添加的菜单项自增菜单高度; 2、菜单宽度可根据菜单文字自行设置; ...
超酷仿QQ导航菜单（JS+CSS）
12-31
超酷仿QQ导航菜单（JS+CSS），可以在同一窗口浏览所有链接页面，清新的QQ皮肤界面一定为你的网站增色不少，因为它使用了“可控制的页面内滚动区域”技术，可以让同一内嵌框架网页添加无数链接菜单，加入了可移动层代码。
QQ菜单 仿QQ菜单
02-10
QQ菜单 仿QQ菜单
JS的QQ菜单
上善若水
02-22 101
     摘要: &lt;html&gt; &lt;head&gt; &lt;title&gt;QQ菜单&lt;/title&gt; &lt;meta http-equiv='Content-Type' content='text/html; charset=gb2312'&gt; &lt;script language='JavaScript'&gt; var&amp;n...  阅读全文 々上...
非常漂亮的QQ菜单5合1
03-03
QQ菜单里面的图片可以自行修改，PSD文件也打包进去了，直接修改即可~ 可通过ini文件修改相关信息 INI里文件格式如下：;制作:村牛 ;"softname="为软件的名称 ;"softpath="为软件安装执行文件路径 [提示语] LTips=请保管好您的随身贵重物品.如有丢失本网吧概不负责,谢谢,祝您上网愉快! [1] softname=腾讯QQ2008 softpath="D:\MenuA\QQ2008\QQ.exe" [2] softname=腾讯QQ2009 softpath="D:\\MenuA\\QQ2009\\Bin\\QQ.exe" [3] softname=腾讯QQ2010 softpath="D:\\MenuA\\QQ2010\\Bin\\QQ.exe" [4] softname=腾讯QQ2011 softpath="F:\\聊天冲浪\\QQ2011\\Bin\\QQ.exe" [5] softname=腾讯QQ国际版 softpath="F:\\聊天冲浪\\QQIntl\\Bin\\QQ.exe" 复制代码
js—QQ菜单简单实例
qq_28147861的博客
11-04 387
用JS索引值(this.index)实现的qq菜单实例！ ul,h2{padding: 0; margin: 0;} li{list-style: none;} #list{width:240px; border: 1px solid #333;margin: 0 auto;} #list.lis{} #list h2{height: 30px
Android高仿QQ侧滑菜单
小马快跑的博客
06-13 3289
先上效果图： GIF图有点模糊，源码已上传Github：Android仿QQ侧滑菜单整体思路：自定义ItemView的根布局(SwipeMenuLayout extends LinearLayout)，复写onTouchEvent来处理滑动事件，注意这里的滑动是View里面内容的滑动而不是View的滑动，View里内容的滑动主要是通过scrollTo、scrollBy来实现，然后自定义SwipeR
干货一：通过自定义PopupWindow实现QQ菜单选项功能
小工匠
04-25 1万+
概述我们在使用手机QQ时，点击菜单键，会弹出如本案例说演示的效果图似的菜单选项。 实现方式有很多种，在这里我们来演示下如何通过自定义PopupWindow的方式一步一步的实现如上效果。关于PopupWindow的基本知识点请查看 PopupWindow分析UI部分 shape的使用-corners solid等 中间的使用View分割 背景的处理 …… 功能点 可以相应点击事件–通过接口回调的方
Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭
热门推荐
Hongyang
09-15 14万+
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/39257409，本文出自【张鸿洋的博客】上一篇博客带大家实现了：Android 自定义控件打造史上最简单的侧滑菜单 ，有兄弟看了以后说，你这滑动菜单过时了呀~QQ5.0的效果还不错~~嗯，的确，上一篇也承诺过，稍微修改上一篇的代码，实现QQ5.0侧滑菜单~~好了，下面就开始为大家展
android:自定义HorizontalScrollView实现qq侧滑菜单
苏苏爱自由
02-18 7793
今天看了鸿洋_大神在慕课网讲的qq5.0侧滑菜单。学了不少的知识，同时也佩服鸿洋_大神思路的清晰。 看了教程课下也自己实现了一下。代码几乎完全相同  别喷我啊。。没办法 o(︶︿︶)o 唉 像素不好 没办法 找不到好的制作gif的软件。 我们暂且称侧滑左边界面的为menu,右边为content 首先是menu的布局 <RelativeLayout xmlns:andro
仿QQ5.0左侧菜单android版
12-16
仿QQ5.0左侧菜单，非常实用，可以直接应用到项目上
仿照QQ菜单
03-04
QQ菜单是一种常见的交互设计元素，常见于各类应用中，尤其是社交软件，如QQ。这种设计模式使得用户可以方便地在屏幕底部快速访问一系列功能或选项，提供了良好的用户体验。本项目"仿照QQ菜单"旨在实现一个与QQ类似的...
网吧QQ菜单
01-10
【网吧QQ菜单】是一款专为网吧环境设计的便捷工具，旨在简化网吧顾客使用QQ的过程，提升网吧服务体验。1.0版本是该软件的初始发行版，它可能包含了基础的功能和优化，以满足网吧运营者的需求，同时也考虑到了用户...
js自定义QQ菜单效果
10-20
主要为大家详细介绍了js自定义QQ菜单，具有收缩，下拉等功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
VB导航菜单 仿QQ菜单
03-15
VB导航菜单 仿QQ菜单是一种在Visual Basic (VB)开发环境中创建类似QQ应用程序的垂直折叠式菜单的控件。这个控件的设计目的是提供一个简单、直观且可自定义的方式来构建用户界面，使得开发者能够轻松地为应用程序添加...
一个qq菜单效果
12-01
总结来说，这个“QQ菜单效果”示例展示了如何利用HTML、CSS和JavaScript创建具有交互性的菜单系统。通过理解并实践这样的示例，开发者可以提升自己在前端开发领域的能力，尤其是对于响应式设计和用户体验的理解。...
android qq底部菜单栏,怎么关闭手机QQ底部导航栏的“看点”？
weixin_30010987的博客
05-27 3435
怎么关闭手机QQ底部导航栏的“看点”？手机QQ的“看点”导航栏很影响用户体验，有没有什么方法能将底部的导航栏关闭呢？跟着小编一起来看看吧。方法如下：一、在手机中找到QQ APP：二、点击进入手机QQ主页后，点击左上角的头像进入菜单界面：三、选择菜单栏中的“设置”选项：四、点击打开“辅助功能”：五、在“辅助功能”界面汇总找到“看点在QQ底部导航栏展示”，点击按钮关闭这个功能：六、成功关闭后，QQ底部...
android侧滑菜单_仿QQ侧滑删除
最新发布
05-22
实现Android侧滑菜单有多种方式，其中一种比较常见的实现方式是使用DrawerLayout和...如果要实现仿QQ侧滑删除功能，可以在ListView或RecyclerView中添加滑动删除的功能，并在删除时更新侧滑菜单中的未读消息数等信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值