返回首页
当前位置: 主页 > 技巧应用 >

仿QQ下拉列表

时间:2010-02-02 20:34来源:未知 作者:admin 点击:
!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防QQ下拉列表/title script type=text/javascript var g_parent,g_child;

<!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>防QQ下拉列表</title>
<script type="text/javascript">
var g_parent,g_child;
var g_hideTimer = null;
var g_locked = false;

function $id(id)
{
 return document.getElementById(id);
}

//Get the element's position
function getPos(parentObj)
{
 var parentPos = [];
 parentPos[0] = parentObj.offsetLeft;//x
 parentPos[1] = parentObj.offsetTop;//y
 while (parentObj = parentObj.offsetParent)
 {
  parentPos[0] += parentObj.offsetLeft;
  parentPos[1] += parentObj.offsetTop;
 }
 return parentPos;
}

function showMoreSoftware(parentObj,childName)
{
 if (g_hideTimer != null)
 {
  clearTimeout(g_hideTimer);
  return;
 }
 var parentPos = getPos(parentObj);
 $id(childName).style.left = parentPos[0] + "px";
 $id(childName).style.top = parentPos[1] + 26 + "px";
 $id("lockBtn").style.left = "163px";
 parentObj.className = "active";
 $id(childName).style.display = "block";
 g_parent = parentObj;
 g_child = $id(childName);
}

function hideMoreSoftware()
{
 if (g_locked == true)
 {
  return;
 }
 else
 {
  g_hideTimer = setTimeout(function(){hidingMenu();},1);
 }
}

function hidingMenu()
{
 g_parent.className = "normal";
 g_child.style.display = "none";
 clearTimeout(g_hideTimer);
 g_hideTimer = null;
 if (g_locked == true)
 {
  $id("lockBtn").className = "drawingPin";
  g_locked = false;
 }
}

function lockMenu()
{
 if (g_locked == false)
 {
  $id("lockBtn").className = "drawingPin_2";
  $id("lockBtn").title="解除固定";
  g_locked = true;
 }
 else
 {
  $id("lockBtn").className = "drawingPin";
  $id("lockBtn").title="固定";
  g_locked = false;
 }
}
</script>
<style>
*:lang(en) .newHeader .nav{
 margin-top:30px;
}
a:link,a:visited,a:active{
 color:#3372a2; text-decoration:none;
}
a:hover{
 text-decoration:underline;}


h2{
 padding:0; margin:0; font-weight:bold; font-size:12px; height:28px; width:142px;}

h2.active{
 background:#99c9e3;}

h2 div{
 position:absolute; padding:1px 1px 0 1px; margin:1px 1px 0 1px; width:138px; overflow:hidden; z-index:10; cursor:pointer;}

h2.active div{
 background:white;}

h2 span{
 display:block; padding:0 9px; height:26px;}
h2.active span{
 background:url(http://im-img.qq.com/images/index3/more_soft.gif) repeat-x left top; }
h2 span em{
 font-style:normal; display:block; background:url(http://im-img.qq.com/images/index3/more_soft.gif) no-repeat right -26px; padding-right:15px; line-height:25px;}

 .softList{
 position:absolute; background:white; border:1px #99c9e3 solid; z-index:9; padding:5px 10px; width:165px; display:none;}

.left{
 float:left; width:50%;}
.right{
 float:right; width:50%;}
h3{
 color:#cc6600; margin:0; padding:0; font-size:14px; font-weight:bolder;}
ul{
 margin:0; padding:0 0 20px 0;}
ul.last{
 padding:0;}
ul li{
 height:auto; line-height:18px; }
ul li a{
 font-size:12px;}


</style>
</head>

<body>
<div class="main">
 <div>
   <div class="part1">
     
     
     
     <div class="version">
          <div class="padder">
   <h2 onmouseover="showMoreSoftware(this,'softList')" onmouseout="hideMoreSoftware()" class="normal"><div><span><em>软件快速下载通道</em></span></div></h2>
              <div class="softList" id="softList" onmouseover="showMoreSoftware()" onmouseout="hideMoreSoftware()">
               <a class="drawingPin" href="javascript:void(0);" onclick="lockMenu()" id="lockBtn" title="固定"></a>
                <div class="qq">
                <h3>QQ</h3>
                    <ul>
                        <li><a onclick="hidingMenu()" href="http://im.qq.com/qq/dlqq.shtml">QQ2008II Beta1</a></li>
                        <li><a onclick="hidingMenu()" href="http://dl_dir.qq.com/qqfile/qq/QQ2008stablehij/QQ2008.exe">QQ2008正式版</a></li>
                        <li><a onclick="hidingMenu()" href="http://im.qq.com/qq/2009/preview4/">QQ2009 Preview4简体中文版</a></li>
                        <li><a onclick="hidingMenu()" href="http://im.qq.com/intl/en/qq/2009/preview4/">QQ2009 Preview 4 English ...</a></li>
                        <li><a onclick="hidingMenu()" href="http://im.qq.com/intl/zh-hant/qq/2009/preview4/">QQ2009 Preview4繁體中文版</a></li>
                        <li><a onclick="hidingMenu()" href="http://dl_dir.qq.com/qqfile/qq2006standardkb2.exe">QQ2006正式版</a></li>
                        <li><a onclick="hidingMenu()" href="http://dl_dir.qq.com/qqfile-big5/EngQQ2005Formal.exe">QQ2005 English Release</a></li>
                        <li><a onclick="hidingMenu()" href="http://im.qq.com/qq/mac/">QQ for Mac</a></li>
                        <li><a onclick="hidingMenu()" href="http://im.qq.com/qq/linux/">QQ for Linux</a></li>
                        <li><a onclick="hidingMenu()" href="http://mobile.qq.com" target="_blank">手机QQ2008</a></li>
                    </ul>
                </div>
                <div class="others">
                 <div class="left">
      <h3>联络沟通</h3>
                        <ul>
                            <li><a onclick="hidingMenu()" href="http://im.qq.com/tm/2008/index_cn.shtml" target="_blank">TM</a></li>
                            <li><a onclick="hidingMenu()" href="http://rtx.tencent.com/rtx/index.shtml" target="_blank">RTX</a></li>
                            <li><a onclick="hidingMenu()" href="http://www.heyyo.com" target="_blank">和悦</a></li>
                            <li><a onclick="hidingMenu()" href="http://fox.foxmail.com.cn" target="_blank">Foxmail</a></li>
                        </ul>
                        <h3>安全效率</h3>
                        <ul class="last">
                            <li><a onclick="hidingMenu()" href="http://im.qq.com/qqcalendar" target="_blank">QQ日历</a></li>
                            <li><a onclick="hidingMenu()" href="http://v3.toolbar.soso.com/" target="_blank">QQ工具栏</a></li>
                            <li><a onclick="hidingMenu()" href="http://im.qq.com/doctor" target="_blank">QQ医生</a></li>
                        </ul>
                    </div>
                    <div class="right">
                     <h3>装机工具</h3>
                        <ul>
                            <li><a onclick="hidingMenu()" href="http://xf.qq.com" target="_blank">超级旋风</a></li>
                            <li><a onclick="hidingMenu()" href="http://player.qq.com" target="_blank">QQ影音</a></li>
                            <li><a onclick="hidingMenu()" href="http://pinyin.qq.com" target="_blank">QQ拼音</a></li>
                            <li><a onclick="hidingMenu()" href="http://tt.qq.com" target="_blank">TT浏览器</a></li>
                        </ul>
                        <h3>生活品味</h3>
                        <ul>
                            <li><a onclick="hidingMenu()" href="http://music.qq.com" target="_blank">QQ音乐</a></li>
                            <li><a onclick="hidingMenu()" href="http://tv.qq.com" target="_blank">QQLive</a></li>
                        </ul>

                        <h3>休闲游戏</h3>
                        <ul class="last">
                            <li><a onclick="hidingMenu()" href="http://qqgame.qq.com" target="_blank">QQ游戏</a></li>
                            <li><a onclick="hidingMenu()" href="http://pet.qq.com" target="_blank">QQ宠物</a></li>
                        </ul>
                    </div>
                </div>
              </div>
          </div>
        </div>
      </div>
  </div>
设计、开发和维护基于标准的网站和应用程序
使用业界领先的 Web 创作工具之一构建世界级的网站和应用程序
</div>
<p><a href="http://www.th22.com">CSS站整理</a></p>
</body>
</html>
 

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名:密码: 验证码:点击我更换图片
推荐内容