In diesem Artikel wird die Methode von JS+CSS beschrieben, um die Web -Character -Suchfunktion des Browsers nachzuahmen. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Kopieren Sie den Code wie folgt: <html>
<kopf>
<title> JS+CSS imitierte Funktion Web Character Search </title>
<style type = text/css>
KÖRPER {
Schriftgröße: 12px; Buchstabe 1PT; Zeilenhöhe: 22px; Rand-Links: 5PT; Rand: 5pt
}
#ScontentMain {
Höhe: 30px; Position: absolut; Top: 28px; Breite: 228px
}
#SContentBar {
Grenzboden: Black 1px fest; Border-Links: Black 1px fest; Grenzrechte: Black 1px Solid; Grenze: Schwarz 1PX Solid; Cursor: Hand; Höhe: 15px; Padding-Bottom: 1PX; Padding-Links: 1PX; Padding-Right: 1PX; Padding-Top: 1PX; Position: absolut; Top: 5px; Breite: 100%
}
#Scontentsub {
Position: absolut; Top: 28px; Breite: 100%
}
A.A1: Hover {
Border-Bottom: #4A8ff2 1px Solid; Border-Links: #4a8ff2 1px Solid; Grenzrechte: #4a8ff2 1px Solid; Border-Top: #4A8ff2 1PX Solid; Linienhöhe: 13pt; Breite: 83px; 12px;: 1869Fe; Ausrichtung: Mitte
}
A.A1: Link {
Farbe: #ffffff; Textdekoration: Keine; 12px; Ausrichtung: Mitte
}
Td {
Schriftgröße: 12px
}
.pos {
Position: Relativ
}
</style>
</head>
<body>
<br> China <br> Jinzhou <br> Abschied vom Weltkrieg <br> luo <br> Huang -Verlust <br> Jianghuai <br> bmw <br> Übertreibung <br> Amerika <br> ajax <br> ASP <br> Java <br> jquery
<Script Language = JavaScript>
var drag genehmigt = false
var zcor, xcor, ycor
Funktion drag_onclick () {
if (search1.drag.Conted == true) Drag ARBEVORDE = false
sonst drag genehmigt = true
}
Funktion movescontentMain () {
if (event.button == 1 && drag genehmigter && 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 falsch
}
}
Funktion dragscontentMain () {
if (! document.all)
Zurückkehren
if (event.srcelement.id == "scontentbar") {
Drag -ANTRAG = 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 = Neue Funktion ("Drag ARGRODED = False")
Funktion aa (e)
{
if (e == 0) alert ("/n- = Seite Suchmaschine 1.0 =/n/n/n- Schreiben Sie einen Code/n- Reparieren Sie den Fehler des Maus-Dragsprung,/n- Wählen Sie weiter aus, ob sie ziehen sollen ...");
zurückkehren;
}
Funktion cose ()
{
if (bestätigen ("Dieses Fenster wird bald geschlossen. Wenn Sie bestätigen, drücken Sie bitte OK! /N /N, wenn Sie dieses Fenster wieder eröffnen möchten, bitte aktualisieren Sie die Seite.")).
scontentmain.style.display = 'none' '
anders
scontentmain.style.display = '' ''
}
document.write ('<div id = "scontentMain"> <form name = "search1" OnSubmit = "return findInpage (this.word.value);"> <div id = "scontentBar"> Klicken Sie auf das Kontrollkästchen unten, halten Sie nach unten und Drag </div> <diving id = "scontentsubacting" "VISIBILIENT". BorderColorlight = "#000000" BorderColordark = "#fffff" bgcolor = "#0099cc" class = font1> <tr bgcolor = "#2d96ff"> <td colspan = "2" align = "center"> <Eingabe type = "Text" name = "word" size " onfocus = window.document href = "#top"> </a> </td> <td align = "center"> <Eingabe type = "surenden" name = "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 links = w
var toppos = h
scontentmain.style.left = w
scontentmain.style.top = h
Funktion onDisplay () {
if (scontentsub.style.display == '')
scontentsub.style.display = 'Keine'
anders
scontentsub.style.display == '' '
}
Funktion offdisplay () {
if (scontentsub.style.display == 'none'))
scontentsub.style.display = '' ''
anders
scontentsub.style.display == 'None' '
}
Funktion staticize () {
w2 = document.body.scrollLeft+links
H2 = document.body.scrolltop+toppos
scontentmain.style.left = w2
ScontentMain.Style.top = H2
}
Fenster.Onscroll = Staticize
Funktion getWord ()
{
var tr
}
Funktionsfindword (W)
{
für (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 = "sichtbar"
RECHT WAHR
}
Return falsch
}
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;
Funktion FindInpage (STR)
{
var txt, i, gefunden;
if (str == "")
false zurückgeben;
if (ns4)
{
if (! Win.find (str))
while (Win.find (str, falsch, wahr))
n ++;
anders
n ++;
if (n == 0) alarm (str + "... der text, den Sie suchen, existiert nicht. /n /n Bitte versuchen Sie, die Schlüsselwörter auf der Seite einzugeben und erneut nachzuschlagen! /n /n und bitte achten Sie darauf, nicht einzugeben" oder ":" zu finden !!! ");
}
if (dh4)
{
txt = win.document.body.CreateTextrange ();
für (i = 0; i <= n && (found = txt.findText (str))! = false; i ++)
{
txt.movestart ("charakter", 1);
txt.moveend ("textedit");
}
Wenn (gefunden)
{
txt.movestart ("charakter", -1);
txt.findText (str);
txt.select ();
txt.scrollintoview ();
n ++; }
anders
{
if (n> 0)
{
n = 0;
findInpage (str);
}
anders
ALERT (STR + "... Der Text, den Sie suchen, existiert nicht. /n /n Bitte versuchen Sie, die Schlüsselwörter in der Seite einzugeben und erneut nachzuschlagen! /n /n und bitte achten Sie darauf, nicht einzugeben"?
}
}
false zurückgeben;
}
self.onError = null;
CurrentX = Currenty = 0;
wasit = null;
lastScrollx = 0; lastScrolly = 0;
Ns = (document.layers)? 1: 0;
Dh = (document.all)? 1: 0;
</Script>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.