동적 라벨 호버 효과 지연 로딩 샘플 code_jquery

----------동적 라벨 바인딩 이벤트의 경우---------- --

코드 복사 코드는 다음과 같습니다.

var outTimer;//실행 시간
var upTimer;//실행 시간
var sqDiv = $("#tm");//표시할 div
var test="";//마우스를 움직이기 위한 식별 표시된 div에
var dd = "";//특정 필드에 의해 전달된 값 스크래치
function test1(){
$("#tm").empty();// 이제 삭제 div
$.ajax({ //데이터 추가
type: "post",
url: "/webmodule/constructionDecision/BaseCD/getCommunityInfo.do ? stCode=" dd,
dataType:"json",
async:false,
success:function(data){
var td="";
for(var i=0 ; itd ="" data[i].name ""
}
$("#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(test2, 500)
}
}); ---- ----------비동적 태그(쿼리 정보)--------------- ------ ---

코드 복사

코드 //hoverDuring 마우스가 지나갈 때의 지연 시간//outDuring 마우스가 나갈 때의 지연 시간//hoverEvent 마우스가 지나갈 때 실행되는 메소드 //outEvent 마우스가 밖으로 나갈 때 실행되는 메서드

$( function() {

$.fn.hoverDelay = function(options) {
var defaults = {
hoverDuring :200 ,
outDuring :200,
hoverEvent : function() {
$.noop()
},
outEvent : function() {
$.noop(); 🎜>}
};
var set = $.extend(defaults, options || {})
var hoverTimer,
return $(this).each( function() {
$(this).hover( function() {
clearTimeout( outTimer);
hoverTimer = setTimeout(sets.hoverEvent, set.hoverDuring);
}, function() {
clearTimeout(hoverTimer);
outTimer = setTimeout(sets.outEvent, set.outDuring );
});
}) 코드는 다음과 같습니다.


// $("#sosoFod h3").each( function() {
$("#sosoweb").each( function() {
var 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(); //이 요소의 왼쪽과 위쪽을 가져옵니다. var x = p.left that.width();//이 플로팅 레이어의 왼쪽을 가져옵니다 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();
}
}); test==""){
$("#tm").hide();
}
}
})