网页小亮点之---点击页面中部召唤出导航菜单

-----------------------------------支持IE  firefox等主流浏览器-----------------------------------------------------------

js代码（基于jquery）

/********************获取当前浏览器中页面的宽和高**********************************/function getHeight(){       var yScroll;       if (window.innerHeight && window.scrollMaxY) {          yScroll = window.innerHeight + window.scrollMaxY;      } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac          yScroll = document.body.scrollHeight;      } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari          yScroll = document.body.offsetHeight;      }          var windowHeight;      if (self.innerHeight) { // all except Explorer          windowHeight = self.innerHeight;      } else if (document.documentElement && document.documentElement.clientHeight) {      // Explorer 6 Strict Mode         windowHeight = document.documentElement.clientHeight;      } else if (document.body) { // other Explorers         windowHeight = document.body.clientHeight;      }       // for small pages with total height less then height of the viewport      if(yScroll < windowHeight){          pageHeight = windowHeight;      } else {          pageHeight = windowHeight;  //始终取屏幕高度（如要取页面高度 可设置  pageHeight = yScroll）    }        return pageHeight;  }  function getWidth(){           var xScroll           if (window.innerHeight && window.scrollMaxY) {          xScroll = document.body.scrollWidth;          } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac          xScroll = document.body.scrollWidth;          } else {          xScroll = document.body.offsetWidth;          }           var windowWidth          if (self.innerHeight) { // all except Explorer  windowWidth = self.innerWidth;  } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode  windowWidth = document.documentElement.clientWidth;  } else if (document.body) { // other Explorers  windowWidth = document.body.clientWidth;          }          if(xScroll < windowWidth){          pageWidth = windowWidth;          } else {          pageWidth = xScroll;          }        return pageWidth;  } /*******************调出页面导航****************/ function show_tools(e){             if(event.button == 2)//按了鼠标右键(防止鼠标左击事件被占用)             {                  var x;                 var y; x = event.clientX;//获得客户端X坐标                 y = event.clientY;//获得客户端Y坐标 //alert(x+"*******"+y);     以下是定位触发区域的坐标 可设置多组 leftx = getWidth()*0.45;  //x轴坐标 leftmax = getWidth()*0.45+100; topy = getHeight()*0.45;//y轴坐标 topmax = getHeight()*0.4+100;  leftx2 = getWidth()*0.3; leftmax2 = getWidth()*0.3+200; topy2 = getHeight()*0; topmax2 = getHeight()*0+100; // alert(x+"****"+leftx+"%%%%%%%"+y+"*******"+topy); //alert (x>leftx && x<leftmax && y>topy && y<topmax); if(x>leftx && x<leftmax && y>topy && y<topmax) { //alert("dsda"); $('.tcc').toggle("slow");//在此坐标内点击触发的事件 }   if(x>leftx2 && x<leftmax2 && y>topy2 && y<topmax2) {  $('.hs').toggle("slow"); } }}//以下是鼠标事件绑定     针对浏览器兼容做了处理$(function(){   if($.browser.msie){document.onmousedown=show_tools;//鼠标右键指向show_toolsdocument.oncontextmenu = function(){return false;}//禁止右键}else{document.oncontextmenu = function(e){ var x; var y; x = e.clientX;//获得客户端X坐标 y = e.clientY;//获得客户端Y坐标// alert(x+"*******"+y); leftx = getWidth()*0.4; leftmax = getWidth()*0.4+150; topy = getHeight()*0.35; topmax = getHeight()*0.35+150;  leftx2 = getWidth()*0.3; leftmax2 = getWidth()*0.3+200; topy2 = getHeight()*0; topmax2 = getHeight()*0+100;  if(x>leftx && x<leftmax && y>topy && y<topmax) {  $('.tcc').toggle("slow"); }  if(x>leftx2 && x<leftmax2 && y>topy2 && y<topmax2) {  $('.hs').toggle("slow"); }return false;}//禁止右键}})

 

母亲节要到了 祝妈妈节日快乐      大家要是觉得本文还有点帮助 不妨帮忙点击下我的站吧  节日淘礼 go去看看

 

 html代码：

tcc的div即 召唤出的div   里面内容自定义

<div class="tcc">    <div class="topleft"></div>    <div class="topright"></div>    <div class="botleft"></div>    <div class="botright"></div></div>

 

 

母亲节要到了 祝妈妈节日快乐      大家要是觉得本文还有点帮助 不妨帮忙点击下我的站吧  节日淘礼 go去看看 

 

 

css代码：（主要属性使用红色标记）

/********************窗口中心弹窗********************************/.tcc{background-image: url(../images/jieritao3.gif);width:150px;height:150px;background-position: 0 0;display:none;position:fixed;top:45%;left:45%;border:#0F0 inset 2px;z-index:300;} .topleft{width:51px;height:51px;background-image: url(../images/jieritao3.gif);background-position:0 0px;float:left;margin:0 0;}.topleft:hover{width:51px;height:51px;background-image: url(../images/jieritao3.gif);background-position:0 149px;float:left;margin:0 0;}.topright{width:51px;height:51px;background-image: url(../images/jieritao3.gif);background-position:50px 0px;float:right;margin:0 0;} .topright:hover{width:51px;height:51px;background-image: url(../images/jieritao3.gif);background-position:50px 145px;float:right;margin:0 0;}.botleft{width:51px;height:51px;background-image: url(../images/jieritao3.gif);background-position:0px 208px;float:left;margin-top:43px;}.botleft:hover{width:51px;height:51px;background-image: url(../images/jieritao3.gif);background-position:0px 57px;float:left;margin-top:43px;}.botright{width:51px;height:51px;background-image: url(../images/jieritao3.gif);background-position:50px 208px;float:left;margin-top:43px;margin-left:48px;}.botright:hover{width:51px;height:51px;background-image: url(../images/jieritao3.gif);background-position:50px 57px;float:left;margin-top:43px;margin-left:48px;}