视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
动态标签悬停效果延迟加载示例代码_jquery
2020-11-27 21:16:15 责编:小采
文档

----------------------对于动态的标签绑定事件------------------------
代码如下:
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;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 = 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();
}
}
});
});

下载本文
显示全文
专题