午夜在线观看视频网站,亚洲免费av一区,欧美日韩视频在线观看免费

仿taobao效果拼音字母檢索功能

深山行者個人網站 2009/12/22 14:07:34 深山行者字體:大中小瀏覽 7791

以下為詳細代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>仿taobao效果拼音字母檢索功能</title>
  <style type="text/css">
  *{ margin:0;padding:0;}
  body{ font:normal 12px Verdana, Arial, Helvetica, sans-serif; text-align:center;}
  #warpper{ position:absolute; left:100px; top:100px;}
  h5{ float:left;}
  a{ text-decoration:underline; cursor:pointer; font-weight:bold;}
  dl{ height:18px; line-height:18px; background:#f7f7f7; padding:0 10px;}
  dt,.normal{ float:left; padding:0 10px; border-right:1px solid #ccc; text-decoration:none; width:auto; cursor:pointer;}
  dt.over{ position:relative;border:1px solid #86e5f0; padding:0 10px 15px 10px; border-bottom:1px solid #caf1f1; margin:-1px 0 0 -1px; z-index:1000; color:#ff6026; text-decoration:underline; background:#caf1f1; height:22px; }
  li{ float:left; list-style-type:none; margin:5px 10px; width:120px;}
  dl dd{ position:absolute; width:500px; left:0;top:37px!important; border:1px solid #86e5f0; background:#caf1f1; filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=120, color=#cccccc); padding:10px 0;}
  .block{ display:block;}
  .none{ display:none;}
  </style>
  <script language="javascript">
  function XMenu(o){
  this.$ = function(o){ return document.getElementById(o);}
  this.$$ = function(o, str){ return o.getElementsByTagName(str);}
  this.obj = o;
  this.bind();
  }
  XMenu.prototype = {
  bind : function(){
  var xxx = this.$(this.obj); //得到傳對的對象。在這里，我沒有做容錯處理。沒有判斷這個對象存在不存在，如果需要請自己判斷。
  var xdt = this.$$(xxx, 'dt');//得到這個對象下的所有的dt
  var xdd = this.$$(xxx, 'dd');//得到這個對象下的所有的dd
  var xdtl = xdt.length;//取得有幾個dt
  xxx['obj'] = xdt[0];//給傳的對象添加一個屬性obj，值為 第一個 dd
  for(var i=0; i<xdtl; i++){//循環 該對象下的所有的 dd，并為它添加onmouseover事件。
  xdt[i]['dd'] = xdd[i];//給當前對象添加一個屬性dd,值為，與它相對應的dd對象，它的作用是在移動到當前對象的時候給與它相對應的dd設置樣式用的。
  xdt[i]['div'] = xxx;//給當前對象添加一個屬性div，值為，調用XMenu時，所傳入的參數所對應的對象。
  xdt[i].onmouseover = function(){
  this['div']['obj'].className = 'normal';
  this['div']['obj']['dd'].className = 'none';
  this.className = 'over';
  this['dd'].className = 'block';
  this['div']['obj'] = this;
  }
  }
  xxx.onmouseout = function(){
  var d = this;//用來保存當前的xxx對象
  this.hide = setTimeout(function(){
  d['obj'].className = 'normal';
  d['obj']['dd'].className = 'none';
  d = null;
  },2000); //鼠標移出后幾秒隱藏。在這里設置時間[秒數*1000]
  }
  xxx.onmouseover = function(){
  if(this.hide){
  clearTimeout(this.hide);
  }
  }
  }
  }
  window.onload = function (){//在文檔onload事件綁定事件處理函數。
  new XMenu('warpper'); //傳入id。該對象下的所有dt將會被綁定onmouseover事件。
  }
  </script>
  </head>
  <body>
  <dl id="warpper">
  <h5>拼音檢索：</h5>
  <dt>a</dt>
  <dd class="none">
  <ul>
  <li><a herf="#">Adidas</a></li>
  <li><a herf="#">AEE/愛意</a></li>
  <li><a herf="#">AF</a></li>
  <li><a herf="#">AF棒球帽</a></li>
  <li><a herf="#">Agatha</a></li>
  <li><a herf="#">Albion/奧爾濱</a></li>
  <li><a herf="#">AMD</a></li>
  <li><a herf="#">Andox</a></li>
  <li><a herf="#">Artini</a></li>
  <li><a herf="#">愛普生</a></li>
  </ul>
  </dd>
  <dt>b</dt>
  <dd class="none">
  <ul>
  <li><a herf="#">fasfs</a></li>
  <li><a herf="#">fsdfsd</a></li>
  </ul>
  </dd>
  <dt>c[ch]</dt>
  <dd class="none">
  <ul>
  <li><a herf="#">fasfs</a></li>
  <li><a herf="#">fsdfsd</a></li>
  <li><a herf="#">fdsfas</a></li>
  </ul>
  </dd>
  <dt>d</dt>
  <dd class="none">
  <ul>
  <li><a herf="#">fasfs</a></li>
  <li><a herf="#">fsdfsd</a></li>
  <li><a herf="#">fdsfas</a></li>
  <li><a herf="#">fasdffsd</a></li>
  </ul>
  </dd>
  <dt>e</dt>
  <dd class="none">
  <ul>
  <li><a herf="#">fasfs</a></li>
  <li><a herf="#">fsdfsd</a></li>
  <li><a herf="#">fdsfas</a></li>
  <li><a herf="#">fasdffsd</a></li>
  <li><a herf="#">fasdfsaf</a></li>
  </ul>
  </dd>
  <dt>f</dt>
  <dd class="none">
  <ul>
  <li><a herf="#">Fancl</a></li>
  <li><a herf="#">Fancl</a></li>
  <li><a herf="#">Fancl</a></li>
  <li><a herf="#">Fancl</a></li>
  <li><a herf="#">Fancl</a></li>
  <li><a herf="#">Fancl</a></li>
  <li><a herf="#">Fancl</a></li>
  <li><a herf="#">Fancl</a></li>
  <li><a herf="#">Fancl</a></li>
  <li><a herf="#">Fancl</a></li>
  </ul>
  </dd>
  </dl>
  </body>
  </html>