前台效果：

html

相关教程推荐：html教程

js

var oldKey0 = "";

var index0 = -1;var oldCount0 = 0;

var newflag = 0;

var currentLength = 0;

function wordSearch(flg) {

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

if (!key) {

return; //key为空则退出

}

getArray();

focusNext(flg);

}

function focusNext(flg) {

if (newflag == 0) {//如果新搜索,index清零

index0 = 0;

}

if (!flg) {

if (oldCount0 != 0) {//如果还有搜索

if (index0 < oldCount0) {//左边如果没走完，走左边

focusMove(index0);

index0++;

} else if (index0 == oldCount0) {//都走完了

index0 = 0;

focusMove(index0);

index0++;

}

else {

index0 = 0;//没确定

focusMove(index0);

index0++;

}

}

} else {

if (oldCount0 != 0) {//如果还有搜索

if (index0 <= oldCount0 && index0 > 0) {//左边如果没走完，走左边

index0--;

focusMove(index0);

} else if (index0 == 0) {//都走完了

index0 = oldCount0;

index0--

focusMove(index0);

}

}

}

}

function getArray() {

newflag = 1;

$(".contrast .result").removeClass("res");

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

if (!key) {

oldKey0 = "";

return; //key为空则退出

}

if (oldKey0 != key || $(".current").length != currentLength) {

//重置

index0 = 0;

var index = 0;

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

$(this).replaceWith($(this).html());

});

pos0 = new Array();

if ($(".contrast-wrap").hasClass("current")) {

currentLength = $(".current").length;

$(".current .contrast").each(function () {

$(this).html($(this).html().replace(new RegExp(key, "gm"), "" + key + "")); // 替换

});

} else {

$(".contrast-wrap").addClass('current');

currentLength = $(".current").length;

$(".contrast").each(function () {

$(this).html($(this).html().replace(new RegExp(key, "gm"), "" + key + "")); // 替换

});

}

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

oldKey0 = key;

//$(".contrast .result").each(function () {

// $(this).parents('.contrast-wrap').addClass('current');

// pos0.push($(this).offset().top);

//});

// pos0.push($(".contrast .result:eq(2)").offset().top - $(".contrast .result:eq(2)").parents(".contrast").offset().top);

oldCount0 = $(".contrast .result").length;

newflag = 0;

}

}

function focusMove(index0) {

$(".contrast .result:eq(" + index0 + ")").parents('.contrast-wrap').addClass('current');

$(".contrast .result:eq(" + index0 + ")").addClass("res");

var top = $(".contrast .result:eq(" + index0 + ")").offset().top + $(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop();

var intop = top - $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top;

$(".contrast .result:eq(" + index0 + ")").parents(".contrast").animate({ scrollTop: intop }, 200);

if ($(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop() == 0) {

$("html, body").animate({ scrollTop: top - 200 }, 200);

} else {

$("html, body").animate({ scrollTop: $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top - 200 }, 200);

}

}

$('#key').change(function () {

if ($('#key').val() == "") {

index0 = 0;

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

$(this).replaceWith($(this).html());

});

oldKey0 = "";

}

});