JS CSS method to imitate browser web page character search function_javascript skills

The example in this article describes the method of JS CSS to imitate the character search function of browser web pages. Share it with everyone for your reference. The specific implementation method is as follows:

Copy code The code is as follows: JS+CSS模仿的网页字符查找功能 BODY { FONT-SIZE: 12px; LETTER-SPACING: 1pt; LINE-HEIGHT: 22px; MARGIN-LEFT: 5pt; MARGIN-TOP: 5pt } #scontentmain { HEIGHT: 30px; POSITION: absolute; TOP: 28px; WIDTH: 228px } #scontentbar { BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; CURSOR: hand; HEIGHT: 15px; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; PADDING-TOP: 1px; POSITION: absolute; TOP: 5px; WIDTH: 100% } #scontentsub { POSITION: absolute; TOP: 28px; WIDTH: 100% } A.a1:hover { BORDER-BOTTOM: #4a8ff2 1px solid; BORDER-LEFT: #4a8ff2 1px solid; BORDER-RIGHT: #4a8ff2 1px solid; BORDER-TOP: #4a8ff2 1px solid; LINE-HEIGHT: 13pt; WIDTH: 83px; 12px;: 1869FE; align: center } A.a1:link { COLOR: #ffffff; TEXT-DECORATION: none; 12px;align: center } TD { FONT-SIZE: 12px } .pos { POSITION: relative }

中国 晋州 百战疲劳壮士哀 洛 黄损 江淮 宝马 夸张 美国 Ajax ASP JAVA JQUERY var dragapproved=false var zcor,xcor,ycor function drag_onclick() { if (search1.drag.checked == true ) dragapproved=false else dragapproved=true } function movescontentmain(){ if (event.button==1&&dragapproved&&search1.drag.checked == true){ zcor.style.pixelLeft=tempvar1+event.clientX-xcor zcor.style.pixelTop=tempvar2+event.clientY-ycor leftpos=document.all.scontentmain.style.pixelLeft-document.body.scrollLeft toppos=document.all.scontentmain.style.pixelTop-document.body.scrollTop return false } } function dragscontentmain(){ if (!document.all) return if (event.srcElement.id=="scontentbar"){ dragapproved=true zcor=scontentmain tempvar1=zcor.style.pixelLeft tempvar2=zcor.style.pixelTop xcor=event.clientX ycor=event.clientY document.onmousemove=movescontentmain } } document.onmousedown=dragscontentmain document.onmouseup=new Function("dragapproved=false") function aa(e) { if (e==0) alert("\n- = 页面搜索引擎 1.0 = \n\n\n- 重写了部分代码 - 修正鼠标拖动跳跃的bug， - 保留选择可否拖动……"); return; } function cose() { if(confirm("即将关闭此窗口，如确认请按确定！\n\n如要重开此窗口请刷新页面。")) scontentmain.style.display='none' else scontentmain.style.display='' } document.write(' 点击下面复选框，按住此处拖动 可用鼠标拖动窗口 '); var w=document.body.clientWidth-450 var h=190 w =document.body.scrollLeft h =document.body.scrollTop var leftpos=w var toppos=h scontentmain.style.left=w scontentmain.style.top=h function ondisplay(){ if (scontentsub.style.display=='') scontentsub.style.display='none' else scontentsub.style.display=='' } function offdisplay(){ if (scontentsub.style.display=='none') scontentsub.style.display='' else scontentsub.style.display=='none' } function staticize(){ w2=document.body.scrollLeft leftpos h2=document.body.scrollTop toppos scontentmain.style.left=w2 scontentmain.style.top=h2 } window.onscroll=staticize function GetWord() { var tr } function FindWord(w) { for (var i=0;i if (WordList.options[i].text==w) { WordList.options[i].selected=true Output.value=WordExpln[i] RESULT.style.visibility="visible" return true } return false } var canDrag=0,canGetWord=0 var oldtop=0,oldscrolltop=0 var WordExpln=new Array() var G_xmlHTTP document.onmousemove = GetWord var NS4 = (document.layers); var IE4 = (document.all); var win = this; var n = 0; function findInPage(str) { var txt, i, found; if (str == "") return false; if (NS4) { if (!win.find(str)) while(win.find(str, false, true)) n ; else n ; if (n == 0) alert(str " ... 您要找的文字不存在。 n请试着输入页面中的关键字再次查找！n n 并且请注意，不要把“？”或“：”也输入查找！！！"); } if (IE4) { txt = win.document.body.createTextRange(); for (i = 0; i { txt.moveStart("character", 1); txt.moveEnd("textedit"); } if (found) { txt.moveStart("character", -1); txt.findText(str); txt.select(); txt.scrollIntoView(); n ; } else { if (n > 0) { n = 0; findInPage(str); } else alert(str "... 您要找的文字不存在。 n请试着输入页面中的关键字再次查找！n n 并且请注意，不要把“？”或“：”也输入查找！！！"); } } return false; } self.onError=null; currentX = currentY = 0; whichIt = null; lastScrollX = 0; lastScrollY = 0; NS = (document.layers) ? 1 : 0; IE = (document.all) ? 1: 0; 希望本文所述对大家的javascript程序设计有所帮助。

JS CSS method to imitate browser web page character search function_javascript skills

Related articles