根据鼠标的位置动态的设置层的位置

来源:互联网 发布:app确认订单页面源码 编辑:程序博客网 时间:2024/05/16 11:52

<script>

 var index=0;   //鼠标第一次点击时候显示,鼠标再次点击将层不在显示

  /**

  * 鼠标点击事件

 *bizData:传递的参数

*/
  function search(bizData)  
  {
        if(index==0)
     {

       
         if(bizData==null)   //当参数为空的时候该层内容清空,不让其显示null
         {
             $("bizDiv").innerText = "";
             $("bizDiv").style.background='#99FFFF';
             document.onclick = mouseMove;
             index++;
         }else
         {
              $("bizDiv").innerText = bizData;
              $("bizDiv").style.background='#99FFFF'; //相对的页面的颜色设置
              document.onclick = mouseMove;  //点击触发事件
              index++;
         }
       
     }else{   //第二次鼠标点击
         $("bizDiv").innerText = "";
         document.onclick = mouseMove;
         $("bizDiv").style.background='transparent'; //将层的背景颜色设置为“透明色”

         index=0; 
     }
  }

 /*

 *鼠标移动事件,获取层的top,right的位置

 */
  function mouseMove(ev)
  {
      ev= ev || window.event;
      var mousePos = mouseCoords(ev);
      $("bizDiv").style.right = document.body.clientWidth-mousePos.x+15;
      $("bizDiv").style.top = document.body.clientHeight-200;
      $("bizDiv").style.width='200';
      //$("bizDiv").style.hight='200';
  }

  /*

  *获取鼠标的位置

  */
  function mouseCoords(ev)
  {
        if(ev.pageX || ev.pageY){
            return {x:ev.pageX, y:ev.pageY};
        }
        return {
            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y:ev.clientY + document.body.scrollTop - document.body.clientTop
       };
  }
  
  </script>
  

原创粉丝点击