仿taobao效果拼音字母检索功能 -- [DIV+CSS]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

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

深山行者个人网站 2009/12/22 14:07:34 深山行者字体:大中小浏览 6100

以下为详细代码

<!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>

前一页:Javascript实现CSS代码高亮显示

后一页:CSS+ul 实现的柱状图

相关阅读: asp简易论坛教程(一)——简易论坛系统制作说明图; 建国60周年（红色）留言板模板; javascript 表单(文本框)触发鼠标事件大全; python通过代码修改pip下载源让下载库飞起; 图片链接默认链接为灰色，鼠标放上去变彩色css效果代码; 07 问题错误整理程序目录权限父路径没打开错误; 生成最新日期与时间选择（年月日）下拉框; DW设置之后更好用 DreamweaverCS编辑GB2312与UTF-8文件在代码视图中点击鼠标错位问题的解决办法

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; uni-app; asp函数库; ASP; DIV+CSS; HTML; python

更多>>同类信息: jquery设置或获取修改classname; 利用css3.0写出一个音乐播放的唱片碟盘的效果; 利用css中的scale()实现放大缩小效果; 利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明; css背景使用base64编码或者将base64编码放在img图片标签中; 利用css3中的-webkit-font-smoothing把网页文字的毛边去掉

更多>>最新添加文章: dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT; Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素; 抖音直播音挂载小雪花懂车帝小程序; javascript获取浏览器指纹可以用来做投票; 火狐Mozilla Firefox出现：无法载入您的Firefox配置文件它可能已经丢失或是无法访问问题解决集合处理办法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起; python里面requests.post返回的res.text还有其它的吗

更多>>随机抽取信息: 汽液两相流; 当鼠标移到图片上时会发生梦幻般轮流变化的图片特效; 提交按钮在自定时间内灰色不可用; 公众号被动回复与客服接口主动推送音乐封面缩略图ThumbMediaId不显示bug问题; 连云港五洲旅行社有限公司; 在DIV+CSS里面IE5.5的专用标签

更多标签热门标签

Java 强聊代码右击失效 html 第几楼文件类型标语源码色彩详解面板 important 2.0 单选首字母收藏夹 photoshop 调色板 style 长 px 选择符配色千位性能多选框查找 word-spacing 载入光标锚点 Margin加倍在线 JavaScript实现文本框提示效果适应链接样式验证码树型破解文字垂直处理 126 flush 理想客户端淘宝 2003 设为首页自适应