브라우저 웹 페이지 문자 검색 function_javascript 기술을 모방하는 JS CSS 방법

이 기사의 예에서는 브라우저 웹 페이지의 문자 검색 기능을 모방하는 JS CSS의 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. 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 함수 ondisplay(){ if (scontentsub.style.display=='') scontentsub.style.display='없음' 그렇지 않으면 scontentsub.style.display=='' } 함수 offdisplay(){ if (scontentsub.style.display=='none') scontentsub.style.display='' 그렇지 않으면 scontentsub.style.display=='없음' } 함수 staticize(){ w2=document.body.scrollLeft leftpos h2=document.body.scrollTop 상단 scontentmain.style.left=w2 scontentmain.style.top=h2 } window.onscroll=staticize 함수 GetWord() { 변수 tr } 함수 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" true를 반환 } 거짓 반환 } 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 승리 = 이것; var n = 0; 함수 findInPage(str) { var txt, i, 발견; if (str == "") 거짓을 반환; if (NS4) { if (!win.find(str)) while(win.find(str, false, true)) N ; 그렇지 않으면 N ; if (n == 0) Alert(str " ... 您要找文字불가。 n请试着输入页면중의 关键字再次查找！n n 并且请注意,不要把“?”或“：”也输入查找！！！"); } if (IE4) { txt = win.document.body.createTextRange(); for (i = 0; i { txt.moveStart("문자", 1); txt.moveEnd("textedit"); } if (발견) { txt.moveStart("문자", -1); txt.findText(str); txt.select(); txt.scrollIntoView(); N ; } 그렇지 않으면 { if (n > 0) { n = 0; findInPage(str); } 그렇지 않으면 Alert(str "... 您要找의 문자가 표시되지 않습니다. n请试着输入页면중의 关键字再次查找！n n 并且请注意,不要把“?”或“：”也输入查找！！！"); } } 거짓을 반환; } self.onError=null; 현재X = 현재Y = 0; which=null; lastScrollX = 0; lastScrollY = 0; NS = (document.layers) ? 1:0; IE = (document.all) ? 1:0;