この記事では、ブラウザのWeb文字検索機能を模倣するJS+CSSの方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします：<html>
<head>
<Title> JS+CSS模倣Web文字検索機能</title>
<style type = text/css>
体 {
フォントサイズ：12px;文字間隔：1pt;ラインハイト：22px;マージン左：5pt;マージントップ：5pt
}
#scontentmain {
高さ：30px;位置：絶対;トップ：28px;幅：228px
}
#scontentbar {
国境底：黒い1pxソリッド;国境左：黒い1pxソリッド。国境右：黒い1pxソリッド。ボーダートップ：黒い1pxソリッド。カーソル：手;高さ：15px;パディングボトム：1px;パディング左：1px;パディング右：1px;パディングトップ：1px;位置：絶対;トップ：5px;幅：100％
}
#scontentsub {
位置：絶対;トップ：28px;幅：100％
}
A.A1：ホバー{
境界線：＃4a8ff2 1px solid;国境左：＃4a8ff2 1pxソリッド;境界線右：＃4A8FF2 1PXソリッド;ボーダートップ：＃4a8ff2 1pxソリッド; Line-Height：13pt;幅：83px; 12px;：1869fe; align：センター
}
A.A1：リンク{
色：#ffffff;テキスト装置：なし; 12px; align：center
}
TD {
フォントサイズ：12px
}
.pos {
位置：相対
}
</style>
</head>
<body>
<br>中国<br> jinzhou <br>第一次世界大戦への別れ<br> luo <br> huang loss <br> jianghuai <br> bmw <br> agaghation <br> ajax <br> asp <br> java <br> jquery
<スクリプト言語= javascript>
var dragapproved = false
var zcor、xcor、ycor
関数drag_onclick（）{
if（seart1.drag.checked == true）dragapproved = false
else dragapproved = true
}
function movescontentmain（）{
if（event.button == 1 && dragApproved && seart1.drag.checked == true）{
zcor.style.pixelleft = tempvar1+event.clientx-xcor
zcor.style.pixeltop = tempvar2+event.clienty-cor
leftpos = document.all.scontentmain.style.pixelleft-document.body.scrollleft
toppos = document.all.scontentmain.style.pixeltop-document.body.scrolltop
falseを返します
}
}
関数dragscontentmain（）{
if（！document.all）
戻る
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"）
関数AA（E）
{
if（e == 0）alert（ "/n- =ページ検索エンジン1.0 =/n/n/n-いくつかのコード/n-マウスドラッグジャンプのバグを修正、/n-ドラッグするかどうかを選択し続ける..."）;
戻る;
}
function cose（）
{
if（確認（ "このウィンドウはすぐに閉じられます。確認する場合は、このウィンドウを再開したい場合はOK！ /n /nを押してください。ページを更新してください。」）
scontentmain.style.display = 'none'
それ以外
scontentmain.style.display = ''
}
document.write（ '<div id = "scontentmain"> <form name = "seart1" onsubmit = "return findinpage（this.word.value）;"> <div id = "scontentbar">下のチェックボックスをクリックして、ドラッグしてドラッグします</div> <div div = "scontentsub" "スタイル=" bordercolorlight = "＃000000" bordercolordark = "＃fffff" bgcolor = "＃0099cc" class = font1> <tr bgcolor = "＃2d96ff"> <td colspan = "2" align = "center"> <inputタイプ= "" onfocus = window.document.search1.word.value = "" style = "background-image：url（）"> </td> </tr> <tr bgcolor = "＃cccccc"> <td> <inputタイプ= "チェックボックス" name = "drag value =" search "reath" with drag_onclick href = "＃top"> </a> </td> <td align = "center"> <input type = "submit" name = "submit" value = "search"> </td> </tr> </form> </table> </div> </div> '）;
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'
それ以外
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+toppos
scontentmain.style.left = w2
scontentmain.style.top = h2
}
window.onscroll = staticize
function getWord（）
{
var tr
}
function findword（w）
{
for（var i = 0; i <wordlist.options.length; 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 = this;
var n = 0;
関数findinpage（str）
{
var txt、私は見つかりました。
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 /n、入力しないように注意してください"または "："
}
if（ie4）
{
txt = win.document.body.createTextrange（）;
for（i = 0; i <= n &&（fund = txt.findtext（str））！= false; i ++）
{
txt.movestart（ "Character"、1）;
txt.moveend（ "textedit"）;
}
if（見つかった）
{
txt.movestart（ "Character"、-1）;
txt.findtext（str）;
txt.select（）;
txt.scrollintoview（）;
n ++; }
それ以外
{
if（n> 0）
{
n = 0;
findinpage（str）;
}
それ以外
アラート（str + "...探しているテキストは存在しません。 /n /nページにキーワードを入力して、もう一度調べてみてください！
}
}
falseを返します。
}
self.onerror = null;
currentX = currenty = 0;
whusit = null;
lastscrollx = 0; lastscrolly = 0;
ns =（document.layers）？ 1：0;
ie =（document.all）？ 1：0;
</script>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。