Jquery完成CTRL+F的页面搜索功能

来源：互联网发布：mysql快照编辑：程序博客网时间：2024/05/01 09:24

功能不可谓是n年前的一个想法了，自从这几天接触Jquery后得到启发，今天花了一下午的时间搞定了。。。呵呵！脑袋有点大了。。。下班回家。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script src="http://www.geged.com/js/jquery-1.3.2.min.js"></script><style>#wrap{position:absolute; top:20px; right:0px; width:250px; height:50px;padding-top:20px;margin-left:20px;background:#f00;}.gao{height:1000px}.bgRed{background:#F00;}.bgWhite{background:#FFF;})</style></head><body><form method="post" name="form1" action="" onSubmit="return chazhao();"><div id="wrap"><input type="text" name="zhi" id="zhi"><input type="button" value="查找" id="chazhao"></div><div>完成CTRL+F的页面搜索功能</div><div class="gao"></div><div>J. Ohn1111111111</div><div class="gao"></div><div>J. Ohn1111111111222222222</div></form><script>$(document).ready(function(){$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');var oldfindkey; //点点亮旧关键字var currLen=0; //当前位置$("#chazhao").click(function(){findkey=$("#zhi").val(); //获取关键字if (findkey!="") //关键字不为空{keyLen=$("div:contains('"+findkey+"')").length; //得到页面中关键字的个数if(keyLen>0) //存在关键字{if(oldfindkey==findkey){currLen=currLen % keyLen;}else{currLen=0;$("div:not(:contains('"+findkey+"'))").addClass("bgWhite");$("div:not(:contains('"+findkey+"')) input").addClass("bgWhite");$("#wrap").css("background", "red");$("div:contains('"+findkey+"')").addClass("bgRed");}$body.animate({scrollTop: $("div:contains("+findkey+"):eq("+currLen+")").offset().top}, 5);currLen=currLen+1;oldfindkey=findkey;}else{ //点点亮不存在关键字currLen=0;oldfindkey="";$("div:not(:contains('"+findkey+"'))").addClass("bgWhite");$("#wrap").addClass("bgRed");}}});$(window).scroll(function(){var h = $(this).scrollTop()+20;$("#wrap").css("top",h);});return false;});</script></body></html>