动态标签 悬停效果 延迟加载示例代码


Posted in Javascript onNovember 21, 2013

----------------------对于动态的标签绑定事件------------------------

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(); 
} 
} 
}); 
});
Javascript 相关文章推荐
JavaScript 调试器简介
Feb 21 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
redux处理异步action解决方案
Mar 22 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 Javascript
JS两种定义方式的区别、内部原理
Nov 21 #Javascript
jQuery操作input值的各种方法总结
Nov 21 #Javascript
jqgrid 表格数据导出实例
Nov 21 #Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 #Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 #Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 #Javascript
js 实现菜单上下显示附效果图
Nov 21 #Javascript
You might like
PHP脚本的10个技巧(1)
2006/10/09 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
Python中下划线的使用方法
2015/03/27 Python
简单解析Django框架中的表单验证
2015/07/17 Python
Python hashlib模块用法实例分析
2018/06/12 Python
python实现飞机大战
2018/09/11 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
财务情况说明书范文
2014/05/06 职场文书
微笑服务标语
2014/06/24 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
办公室卫生管理制度
2015/08/04 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
辞职申请书范本
2019/05/20 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
MySQL创建管理HASH分区
2022/04/13 MySQL