首頁 web前端 js教程 動態標籤 懸停效果 延遲載入範例程式碼_jquery

動態標籤 懸停效果 延遲載入範例程式碼_jquery

May 16, 2016 pm 05:13 PM
延遲載入 懸停效果

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

複製程式碼 程式碼如下:

var outTimer;//執行時間


var outTimer;//執行時間var upTimer;//執行時間
var sqDiv = $("#tm");//要顯示的div
var test="";//標識,為了將滑鼠移到顯示的div上時,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;i td ="" 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";//說明滑鼠在顯示的d​​iv上
},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(() { },
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();
}
}
}); });
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Spring Data JPA 的架構和工作原理是什麼? Spring Data JPA 的架構和工作原理是什麼? Apr 17, 2024 pm 02:48 PM

Spring Data JPA 的架構和工作原理是什麼?

Java JPA 效能優化秘技:讓你的應用程式飛起來 Java JPA 效能優化秘技:讓你的應用程式飛起來 Feb 19, 2024 pm 09:03 PM

Java JPA 效能優化秘技:讓你的應用程式飛起來

Linux 動態連結與靜態連結原來是這麼回事? Linux 動態連結與靜態連結原來是這麼回事? Feb 05, 2024 pm 05:45 PM

Linux 動態連結與靜態連結原來是這麼回事?

Hibernate 如何最佳化資料庫查詢效能? Hibernate 如何最佳化資料庫查詢效能? Apr 17, 2024 pm 03:00 PM

Hibernate 如何最佳化資料庫查詢效能?

如何阻止iframe載入事件 如何阻止iframe載入事件 Feb 19, 2024 am 08:02 AM

如何阻止iframe載入事件

解碼Laravel效能瓶頸:優化技巧全面揭秘! 解碼Laravel效能瓶頸:優化技巧全面揭秘! Mar 06, 2024 pm 02:33 PM

解碼Laravel效能瓶頸:優化技巧全面揭秘!

html圖片過大怎麼辦 html圖片過大怎麼辦 Apr 05, 2024 pm 12:24 PM

html圖片過大怎麼辦

Hibernate ORM 框架的缺點是什麼? Hibernate ORM 框架的缺點是什麼? Apr 18, 2024 am 08:30 AM

Hibernate ORM 框架的缺點是什麼?

See all articles