頁面搜尋的簡單實現

2021-09-29 04:36:29 字數 1388 閱讀 7494

整個body放在乙個dom裡面：

....
彈窗在這裡：

搜尋


上乙個下乙個


取消搜尋
css裡面加個樣式，也可以根據需求自定義：

.res 


.result
邏輯：

var oldkey = "";


var index = -1;


var previous = function();


var next = function (reset)


if(index==oldcount)


search(reset);


};var  search = function (reset) 


$(".res").addclass("result");


$(".result").removeclass("res");//去除原本的res樣式


var key = $("#search_key").val(); //取key值


if (!key) );


oldkey = "";


return; //key為空則退出


}if (oldkey != key || reset) );


pos = new array();


posy = new array();


var regexp = new regexp(key+'(?!([^<]+)?>)', 'g');//正規表示式匹配


$("#window_content").html($("#window_content").html().replace(regexp, "" + key + "")); // 高亮操作


detail.typeswitch();


detail.klisearch();


$("#key").val(key);


oldkey = key;


$(".result").each(function () 


});oldcount = $(".result").length;


}$(".result:eq(" + index + ")").removeclass("result");//移除之前的樣式


$("body").scrolltop(pos[index] - 100 );//跳轉到指定位置


window.scrollto(0,pos[index]-500);


}var  redisplay = function () );


$(".res").each(function () );


index = 0;


}
參考：jsp頁面 ctrl+f 功能實現

頁面探針簡單實現

應用試例 public partial class default extend.page using system using system.data using system.configuration using system.collections using system.web usin...

div實現簡單的頁面布局

摘要 使用html和css實現簡單的旅遊 布局，從而熟練地運用css樣式，達到美觀的布局效果。html style width 780px height 150px middle right footer css樣式 body container banner globallink globalli...

ajax實現簡單的登入頁面

ajax工作原理是乙個頁面的指定位置可以載入另乙個頁面所有的輸出內容，這樣就實現了乙個靜態頁面也能獲取到資料庫中的返回資料資訊了。所以ajax實現了乙個靜態網頁在不重新整理整個頁面的情況下與伺服器通訊，減少了使用者等待時間，同時降低了網路流量，增強了客戶體驗的友好程度。1.ajax login.ht...