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


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 相关文章推荐
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 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使用parse_url和parse_str解析URL
2015/02/22 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
使用JS获取SessionStorage的值
2018/01/12 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
详解python中的json和字典dict
2018/06/22 Python
浅谈Python中的bs4基础
2018/10/21 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
python cumsum函数的具体使用
2019/07/29 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
用 Python 制作地球仪的方法
2020/04/24 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
年级组长自我鉴定
2014/02/22 职场文书
失恋33天观后感
2015/06/11 职场文书
教师节领导致辞
2015/07/29 职场文书
六年级数学教学反思
2016/02/16 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript