jquery实现div遮罩效果,并获取鼠标位置。

时间:2022-06-15 13:14:37

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style>
.divmain {
 z-index: 9999;
 margin: 0 auto;
 width: 400px;
 align: left;
 padding : 10px;
 position: absolute;
 background: #fff;
 padding: 10px;
}
</style>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>div遮罩效果并跟随鼠标弹出</title>
  <script src="../../js/jquery.js" type="text/javascript"></script>
 </head>
 
 <body style="background-color:black;" onload="javascript:init();">

  <table width="50%" border="1" align="center" cellpadding="0" cellspacing="0">
   <tr>
    <td width="25%" onclick="javascript:showDiv('viewDiv');" >
     <a href="#" > 开始 </a>
    </td>
   </tr>
  </table>

  <div id='mask' style="display: none"></div>
  <div id="viewDiv" style="display:none;">
   <table class="divmain" width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
     <td width="20%">
      标题:<font color="red">*</font>
     </td>
     <td width="80%">
      <input type="text" name="title_view" id="title_view" size="35">
     </td>
     <td onclick="javascript:hideDiv('viewDiv');" >
      关闭
     </td>
    </tr>
   </table>
  </div>

 </body>
</html>


<script language="javascript">

function init(){
 document.onmousemove = mouseMove;
}


var mouseleft = 0;
var mousetop = 0;

function mouseMove(e){
  if(!document.all){
  
   mouseleft=e.pageX;
   mousetop=e.pageY;
  }else{
   mouseleft=document.body.scrollLeft+event.clientX;
   mousetop=document.body.scrollTop+event.clientY;
  }
 
}

function showDiv(div_id) {  
    var div_obj = $("#"+div_id);  
    var windowWidth = document.body.clientWidth;      
    var windowHeight = document.body.clientHeight;      
    var popupHeight = div_obj.height();      
    var popupWidth = div_obj.width();
 
    //添加并显示遮罩层  
 $("#mask").css({"opacity":"0.6","display":"block","position": "absolute","background-color":"#fff"})
    .width(windowWidth * 0.99)  
    .height(windowHeight * 0.99)
    .click(function() {hideDiv(div_id); })
    .fadeIn(100);
 div_obj.css({"position": "absolute"})  
   .animate({left: mouseleft, top: mousetop, opacity: "show" }, "fast");  
}  
 
function hideDiv(div_id) {  
    $("#mask").css({"display":"none"});  
    $("#" + div_id).animate({left: 0, top: 0, opacity: "hide" }, "slow");  
}


</script>