CSDN首页 空间 新闻 论坛 Blog 下载 读书 网摘 搜索 .NET Java 视频 接项目 求职 在线学习 买书 程序员 通知
不看会后悔的Windows XP之经验谈 简单快捷DIY实用家庭影院
CSDN社区
搜索 收藏 打印 关闭
CSDN社区 >  Web 开发 >  JavaScript

遇到一个弹出菜单弹出方向的问题

楼主rokey001()2006-12-04 13:54:18 在 Web 开发 / JavaScript 提问

http://www.templatesbase.com/detail.php?id=1076  
  请问这个页面的图片   buy图片   的弹出菜单,弹出方向要向上弹出怎么搞呢,目前默认为下拉的,即向下弹出?  
  以下是那个功能的代码:  
   
  <!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>  
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312"   />  
  <title>&#206;&#222;±ê&#204;&#226;&#206;&#196;&#181;&#181;</title>  
  <link   href="/css/st-css.css"   rel="stylesheet"   type="text/css">  
  <style   type="text/css">  
  #dropmenudiv{  
  position:absolute;  
  border:1px   solid   black;  
  border-bottom-width:   0;  
  font:normal   12px   Verdana;  
  line-height:18px;  
  z-index:100;  
  }  
   
  #dropmenudiv   a{  
  width:   100%;  
  display:   block;  
  text-indent:   3px;  
  border-bottom:   1px   solid   black;  
  padding:   1px   0;  
  text-decoration:   none;  
  font-weight:   bold;  
  }  
   
  #dropmenudiv   a:hover{   /*hover   background   color*/  
  background-color:   yellow;  
  }  
   
  </style>  
        <script   language="javascript">  
   
  var   menuwidth='165px'   //default   menu   width  
  var   menubgcolor='#8CB4FA'   //menu   bgcolor  
  var   disappeardelay=250   //menu   disappear   speed   onMouseout   (in   miliseconds)  
  var   hidemenu_onclick="yes"   //hide   menu   when   user   clicks   within   menu?  
   
  /////No   further   editting   needed  
   
  var   ie4=document.all  
  var   ns6=document.getElementById&&!document.all  
   
  if   (ie4||ns6)  
  document.write('<div   id="dropmenudiv"   style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'"   onMouseover="clearhidemenu()"   onMouseout="dynamichide(event)"></div>')  
   
  function   getposOffset(what,   offsettype){  
  var   totaloffset=(offsettype=="left")?   what.offsetLeft   :   what.offsetTop;  
  var   parentEl=what.offsetParent;  
  while   (parentEl!=null){  
  totaloffset=(offsettype=="left")?   totaloffset+parentEl.offsetLeft   :   totaloffset+parentEl.offsetTop;  
  parentEl=parentEl.offsetParent;  
  }  
  return   totaloffset;  
  }  
   
   
  function   showhide(obj,   e,   visible,   hidden,   menuwidth){  
  if   (ie4||ns6)  
  dropmenuobj.style.left=dropmenuobj.style.top="-500px"  
  if   (menuwidth!=""){  
  dropmenuobj.widthobj=dropmenuobj.style  
  dropmenuobj.widthobj.width=menuwidth  
  }  
  if   (e.type=="click"   &&   obj.visibility==hidden   ||   e.type=="mouseover")  
  obj.visibility=visible  
  else   if   (e.type=="click")  
  obj.visibility=hidden  
  }  
   
  function   iecompattest(){  
  return   (document.compatMode   &&   document.compatMode!="BackCompat")?   document.documentElement   :   document.body  
  }  
   
  function   clearbrowseredge(obj,   whichedge){  
  var   edgeoffset=0  
  if   (whichedge=="rightedge"){  
  var   windowedge=ie4   &&   !window.opera?   iecompattest().scrollLeft+iecompattest().clientWidth-15   :   window.pageXOffset+window.innerWidth-15  
  dropmenuobj.contentmeasure=dropmenuobj.offsetWidth  
  if   (windowedge-dropmenuobj.x   <   dropmenuobj.contentmeasure)  
  edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth  
  }  
  else{  
  var   topedge=ie4   &&   !window.opera?   iecompattest().scrollTop   :   window.pageYOffset  
  var   windowedge=ie4   &&   !window.opera?   iecompattest().scrollTop+iecompattest().clientHeight-15   :   window.pageYOffset+window.innerHeight-18  
  dropmenuobj.contentmeasure=dropmenuobj.offsetHeight  
  if   (windowedge-dropmenuobj.y   <   dropmenuobj.contentmeasure){   //move   up?  
  edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight  
  if   ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure)   //up   no   good   either?  
  edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge  
  }  
  }  
  return   edgeoffset  
  }  
   
  function   populatemenu(what){  
  if   (ie4||ns6)  
  dropmenuobj.innerHTML=what.join("")  
  }  
   
   
  function   dropdownmenu(obj,   e,   menucontents,   menuwidth){  
  if   (window.event)   event.cancelBubble=true  
  else   if   (e.stopPropagation)   e.stopPropagation()  
  clearhidemenu()  
  dropmenuobj=document.getElementById?   document.getElementById("dropmenudiv")   :   dropmenudiv  
  populatemenu(menucontents)  
   
  if   (ie4||ns6){  
  showhide(dropmenuobj.style,   e,   "visible",   "hidden",   menuwidth)  
  dropmenuobj.x=getposOffset(obj,   "left")  
  dropmenuobj.y=getposOffset(obj,   "top")  
  dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj,   "rightedge")+"px"  
  dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj,   "topedge")+obj.offsetHeight+"px"  
  }  
   
  return   clickreturnvalue()  
  }  
   
  function   clickreturnvalue(){  
  if   (ie4||ns6)   return   false  
  else   return   true  
  }  
   
  function   contains_ns6(a,   b)   {  
  while   (b.parentNode)  
  if   ((b   =   b.parentNode)   ==   a)  
  return   true;  
  return   false;  
  }  
   
  function   dynamichide(e){  
  if   (ie4&&!dropmenuobj.contains(e.toElement))  
  delayhidemenu()  
  else   if   (ns6&&e.currentTarget!=   e.relatedTarget&&   !contains_ns6(e.currentTarget,   e.relatedTarget))  
  delayhidemenu()  
  }  
   
  function   hidemenu(e){  
  if   (typeof   dropmenuobj!="undefined"){  
  if   (ie4||ns6)  
  dropmenuobj.style.visibility="hidden"  
  }  
  }  
   
  function   delayhidemenu(){  
  if   (ie4||ns6)  
  delayhide=setTimeout("hidemenu()",disappeardelay)  
  }  
   
  function   clearhidemenu(){  
  if   (typeof   delayhide!="undefined")  
  clearTimeout(delayhide)  
  }  
   
  if   (hidemenu_onclick=="yes")  
  document.onclick=hidemenu  
  </script>  
   
  </head>  
   
  <body>  
   
   
   
  <p>&nbsp;</p>  
  <p>&nbsp;</p>  
  <p>&nbsp;</p>  
  <p>&nbsp;</p>  
  <p><a   href="default.htm"   onClick="return   clickreturnvalue()"   onMouseover="dropdownmenu(this,   event,   menu2,   '150px')"   onMouseout="delayhidemenu()">Web   Design</a>   |  
   
     
  </p>  
  </body>  
  </html>  
  问题点数:60、回复次数:5Top

1 楼lantersen(蓝水仁~)回复于 2006-12-04 14:05:47 得分 40

你可以去获取当前的鼠标的位置,如果超过了某个位置则身上,否则就向下弹出;Top

2 楼shiliangdong(Stou)回复于 2006-12-04 14:12:37 得分 10

UPTop

3 楼rokey001()回复于 2006-12-04 14:13:12 得分 0

不是很明了咧,其实我对js也不是很熟悉,一般这种效果我都是拷贝的代码进行修改,上面这个代码我修改得功能实现得差不多了,就是这个弹出方向不知道是哪段代码控制的~~~Top

4 楼rokey001()回复于 2006-12-04 14:38:48 得分 0

已经自行解决,呵呵Top

5 楼mqcan(NO1)回复于 2006-12-04 16:08:20 得分 10

恭喜搂住解决,顺便接分!Top

相关问题

关键词

得分解答快速导航

  • 帖主:rokey001
  • lantersen
  • shiliangdong
  • mqcan

相关链接

  • Web开发类图书

广告也精彩

反馈

请通过下述方式给我们反馈
反馈
提问
网站简介|广告服务|VIP资费标准|银行汇款帐号|网站地图|帮助|联系方式|诚聘英才|English|问题报告
北京创新乐知广告有限公司 版权所有, 京 ICP 证 070598 号
世纪乐知(北京)网络技术有限公司 提供技术支持
Copyright © 2000-2008, CSDN.NET, All Rights Reserved
GongshangLogo