動態標籤 懸停效果 延遲加載

//----------------------------------------------------------------對於動態的標籤綁定事件--------------------------------------------------------------------------------

var outTimer;//執行時間
  var upTimer;//執行時間
  var sqDiv = $("#tm");//要顯示的div
  var test="";//標識，爲了將鼠標移到顯示的div上時，div不會消失
  var dd = "";//劃過某一字段傳的值
  function test1(){
   $("#tm").empty();//現將div清空
   $.ajax({  //往裏加數據
    type:"post",
    url:"<%=path %>/webmodule/constructionDecision/BaseCD/getCommunityInfo.do?stCode="+dd,
    dataType:"json",
    async:false,
    success:function(data){
     var td="";
       for(var i=0;i<data.length;i++){
        td+="<a id ='"+data[i].gridNumber+"'>"+data[i].name+"</a>";
       }
        $("#tm").append(td);
    }
   });
   $("#tm").show();
  }
  
  function test2(){//隱藏div的方法
   if(test ==""){
    $("#tm").hide();
   }
  }
  $("#cityTable a").die().live('mouseover mouseout', function(event) {  //給動態標籤綁定事件
   
   if(event.type=='mouseover'){ //移上時
    clearTimeout(outTimer);//先清空移出的時間，這樣能避免鼠標劃過就執行函數，減輕服務器的壓力
    dd=$(this).attr("id");
    upTimer = setTimeout(test1, 500);//0.5秒後再執行
   }
   if(event.type=='mouseout'){
    sqDiv.hover(
    function(){
     test = "on";//說明鼠標在顯示的div上
    },function(){
     test = "";
     test2();
    });
    clearTimeout(upTimer);
    outTimer = setTimeout(test2, 500);
   }
  });

 

 

 

 

//--------------------------------------------------------------------非動態標籤（查詢資料）--------------------------------------------------------------------------

 

//hoverDuring       鼠標經過的延時時間
   //outDuring          鼠標移出的延時時間
   //hoverEvent        鼠標經過執行的方法
   //outEvent         鼠標移出執行的方法
 $( function() {
  $.fn.hoverDelay = function(options) {
   var defaults = {
    hoverDuring :200,
    outDuring :200,
    hoverEvent : function() {
     $.noop();
    },
    outEvent : function() {
     $.noop();
    }
   };
   var sets = $.extend(defaults, options || {});
   var hoverTimer, outTimer;
   return $(this).each( function() {
    $(this).hover( function() {
     clearTimeout(outTimer);
     hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring);
    }, function() {
     clearTimeout(hoverTimer);
     outTimer = setTimeout(sets.outEvent, sets.outDuring);
    });
   });
  }
  

 //$("#sosoFod h3").each( function() {
 $("#sosoweb").each( function() {
   var test = "";//當test爲空時，鼠標移到字段顯示div，移出隱藏div
   var that = $(this);
   var id = that.attr("id");
   var div = $("#tm");
   div.css("position", "absolute");//讓這個層可以絕對定位 
    that.hoverDelay( {
     outDuring :1000,
     hoverEvent : function() {
      div.css("display", "block");
       var p = that.position(); //獲取這個元素的left和top 
             var x = p.left + that.width();//獲取這個浮動層的left 
             var docWidth = $(document).width();//獲取網頁的寬 
            if (x > docWidth - div.width() - 20) { 
              x = p.left - div.width(); 
            } 
            div.css("left", x); 
            div.css("top", p.top); 
      //$("#tm").show();
      
     },
     outEvent : function() {
      
      $("#tm").hoverDelay( {
       outDuring :1000,
       hoverEvent : function() {
       test = "on";
       $("#tm").show();
      },
      outEvent : function() {
      test="";
       $("#tm").hide();
      }
    });
    if(test==""){
     $("#tm").hide();
    }
    
     }
    });
    
   
  })；