ブラウザWebページの文字検索機能を模倣するJS CSSメソッド_JavaScriptスキル

この記事の例では、ブラウザのWebページの文字検索機能を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='none' それ以外 scontentsub.style.display=='' } 関数 offdisplay(){ if (scontentsub.style.display=='none') scontentsub.style.display='' それ以外 scontentsub.style.display=='none' } 関数 staticize(){ w2=document.body.scrollLeft leftpos h2=document.body.scrollTop トポス scontentmain.style.left=w2 scontentmain.style.top=h2 } window.onscroll=staticize 関数 GetWord() { var 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 を返します } 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 = これ; var n = 0; 関数 findInPage(str) { var txt、i、見つかりました。 if (str == "") false を返します。 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("テキストエディット"); } if (見つかった) { txt.moveStart("文字", -1); txt.findText(str); txt.select(); txt.scrollIntoView(); n ; } それ以外 { if (n > 0) { n = 0; findInPage(str); } それ以外 alert(str "... 您要監視の文字が存在しません。 n请试着输入页面中の关键字再次查找！n n并および请注意，不要ハンドル“？”または“：“也输入查找！！”）; } } false を返します。 } self.onError=null; 現在のX = 現在のY = 0; どれ = null; lastScrollX = 0; lastScrollY = 0; NS = (ドキュメント.レイヤー) ? 1:0; IE = (ドキュメント.オール) ? 1:0; ここで説明されている大家向けの JavaScript プログラムの設計が役立つことを望みます。