JQuery 应用： 鼠标滑过td 显示td 的其他内容（方法一）

在开发企业内容信件系统模块时，需要实现这样的功能：

 

table 中有  from     title    delete  三个   <td>

其中title中显示信件的标题

当用户不需要查看该信件的所有内容，而只需要查看大体内容时，只需要将鼠标移动到title 的td中，则在鼠标焦点附近会显示出content内容。

具体做法有两种：

第一种：（content  直接写入td）

  1.  在初始化table 内容时，将content内容以  content=“${message.msg}” 的形式写入 td中，当鼠标进入td后，触发hover事件。

   2. hover 事件获取到 鼠标的位置  $locx=event.locX ; $locy=event.locY;

   3. 将原来隐藏的div class=“mydiv”   显示在  鼠标触发事件的位置处，并将content作为mydiv 的显示内容

具体代码如下：

 

        $(".hrefClass").hover(function(event){
            $thiss=$(this);
      $locx=event.pageX;
       $locy=event.pageY;
        $(".mydiv").css("left",$locx+8).css("top",$locy).text($thiss.attr("content"));
       $setTime=setTimeout(function(){
      
     
      $(".mydiv").css("left",$locx+8).css("top",$locy).text($thiss.attr("content")).slideDown("slow");
      },500);
        },function(){
            $(".mydiv").slideUp();
             clearTimeout($setTime);
        })

为什么css("left",$locx+8) 而不是 css("left",$locx) 呢？

   因为当mydiv在  鼠标位置时，会将td 遮挡住，这样 鼠标就算是  mouseout  td了，也就会触发  hover 的第二个函数，将 mydiv 隐藏。而当mydiv 隐藏时，鼠标又mouseover  td了，又一次触发hover 的一个函数。如此循环下去，用户就会看到 mydiv 一直在重复 出现-》隐藏  动作。

  而将mydiv 显示的位置离  mouse 的原始位置，则可以避免这一点。

 

如果用户刚进入td 立刻就离开了该 td  则表示他并不希望查看message 的内容，对于这种情况也要加以区别

我使用了setTimeout 来使mydiv  延迟500毫秒显示，如果在这500毫秒期间，用户离开了td ，则不显示mydiv

 

 

 

第二种：（Jquery  $.post）

 

   1. 鼠标进入td ，触发hover事件

   2.获取到message的id，通过$.post  将id 传到  后台的messageAction ，查询到该 message 的内容

   3.当message内容从后台返回后，$.post  调用回调函数，将返回的JSON数据解析后，交给mydiv 作为显示内容来显示

   4.当鼠标从td  离开时，触发hover的第二个函数，将mydiv 隐藏

   具体代码如下：

 

 

  var startTime=0;
       var endTime;

      $(".message_id").css("cursor","pointer");
  $(".message_id").hover(function(ee){
        var dateTime=new Date();
         endTime=dateTime.getTime();
           if(endTime-startTime<=1000){
              return false;
          }
         
           $thiss=$(this);
  $locx=ee.pageX;
  $locy=ee.pageY;
         
        timeOutId=setTimeout(
          function(){
               $manager_id=  $thiss.text();

       $url1="messageAction!findMessage.action?message.id="+$thiss.attr("messageId");
      
       $.post(
         $url1,
        function(json){
       
            var data=eval((json.theaterString));
   
            $(".mywindow").text(data[0].userName);
            $(".mywindow").css("left",$locx).css("top",$locy);
            $(".mywindow").css("display","block");   
        },
         "json"
       );
          }
             ,300);
             startTime=endTime;
            
            
      
  },function(){
          $(".mywindow").css("display","none");

    clearTimeout(timeoutId);
    return false;
 
     
     
  })

 

如果用户频繁地或者无意的一直在table中滑动鼠标，而每次进入一个td都会调用ajax 来与后台进行交互，这样势必会对网络和后台服务器带来很大的开销，因此我使用了代码来控制用户的行为,要求前后两次mouseover 时间间隔必须大于1000毫秒

   startTime=0

 

 

   endTime=mouseover（time）

   if(endTime-startTime<1000)  不执行

  否则    发送请求，显示mydiv ，startTime=endTime；

 

 

如果用户刚进入td 立刻就离开了该 td  则表示他并不希望查看message 的内容，对于这种情况也要加以区别

我使用了setTimeout 来使mydiv  延迟500毫秒显示，如果在这500毫秒期间，用户离开了td ，则不发送请求