鼠标经过，显示层并跟随鼠标

效果图：

HTML：

<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        .userInfo{ cursor:pointer; }
        .userInfoCont{ position:absolute; display:none; width:500px; background:#F2F2F2; border:5px solid #F2F2F2; z-index:99;}
    </style>
    <script type="text/javascript">
        $(function(){
            var xOffset = 10;
            var yOffset = 20;
            var w = $(window).width();
            var y = $(window).height();
            $(".userInfo").hover(function(e){
                    if(e.pageX < w/2){
                        $(this).find(".userInfoCont").show().css({
                            left: e.pageX + xOffset + "px",
                            right: "auto"
                        }).fadeIn("fast");
                    }else{
                        $(this).find(".userInfoCont").show().css("right",(w - e.pageX + yOffset) + "px").css("left", "auto").fadeIn("fast");    
                    }
                    if(e.pageY < y/2){
                        $(this).find(".userInfoCont").show().css({
                            top: e.pageY + xOffset + "px",
                            bottom: "auto"
                        }).fadeIn("fast");
                    }else{
                        $(this).find(".userInfoCont").show().css("bottom",(y - e.pageY + yOffset) + "px").css("top", "auto").fadeIn("fast");    
                    }
                },function(){
                    $(this).find(".userInfoCont").fadeOut("fast");
                    }).mousemove(function(e){
                            if(e.pageX < w/2){
                                $(this).find(".userInfoCont").show().css("left",(e.pageX + yOffset) + "px").css("right","auto");
                            }else{
                                $(this).find(".userInfoCont").show().css("right",(w - e.pageX + yOffset) + "px").css("left","auto");
                            }
                            if(e.pageY < y/2){
                                $(this).find(".userInfoCont").show().css({
                                    top: e.pageY + xOffset + "px",
                                    bottom: "auto"
                                }).fadeIn("fast");
                            }else{
                                $(this).find(".userInfoCont").show().css("bottom",(y - e.pageY + yOffset) + "px").css("top", "auto").fadeIn("fast");    
                            }
                        });    
        });
    </script>

<td class="userInfo">
   已用 
  <div style="display: none; left: 331px; right: auto; top: 234px; bottom: auto;" class="userInfoCont">
   <table border="1" width="100%" class="tbDefault">
    <tbody>
     <tr>
      <td colspan="4">课室使用信息</td>
     </tr>
     <tr>
      <td width="80" class="tdRight">周次：</td>
      <td width="170" class="tdLeft">1</td>
      <td width="80" class="tdRight">日期：</td>
      <td width="170" class="tdLeft">2014-09-08</td>
     </tr>
     <tr>
      <td width="80" class="tdRight">星期：</td>
      <td width="170" class="tdLeft">一</td>
      <td width="80" class="tdRight">节次：</td>
      <td width="170" class="tdLeft">一二</td>
     </tr>
     <tr>
      <td width="80" class="tdRight">课程名称：</td>
      <td width="170" class="tdLeft">眼科学</td>
      <td width="80" class="tdRight">授课内容：</td>
      <td width="170" class="tdLeft">课程内容8</td>
     </tr>
     <tr>
      <td width="80" class="tdRight">节数：</td>
      <td width="170" class="tdLeft">2</td>
      <td width="80" class="tdRight">授课教师：</td>
      <td width="170" class="tdLeft">陈畅</td>
     </tr>
     <tr>
      <td width="80" class="tdRight">授课形式：</td>
      <td width="170" class="tdLeft">理论课</td>
      <td width="80" class="tdRight">授课地点：</td>
      <td width="170" class="tdLeft">本部教学楼201教室</td>
     </tr>
     <tr>
      <td width="80" class="tdRight">班级：</td>
      <td width="170" class="tdLeft">2014级七年制EIP3班</td>
      <td width="80" class="tdRight">学生数：</td>
      <td width="170" class="tdLeft">40</td>
     </tr>
    </tbody>
   </table>
  </div> 
</td>

 

参考：http://www.zhangxinxu.com/wordpress/2009/10/jquery-鼠标经过显示大图并跟随鼠标效果插件/

参考实例：http://www.zhangxinxu.com/study/200910/jQuery-plugin-image-big-show.html

 

转载于:https://www.cnblogs.com/linyongqin/articles/4239174.html