Cet article décrit la méthode de JS + CSS pour imiter la fonction de recherche de caractères Web du navigateur. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <html>
<adal>
<Title> JS + CSS Fonction de recherche de caractères Web imitée </TITAL>
<style type = text / css>
CORPS {
Taille de police: 12px; Espacement des lettres: 1pt; Hauteur de ligne: 22px; Marge-gauche: 5pt; Marge: 5pt
}
#ScontentMain {
Hauteur: 30px; Position: absolue; En haut: 28px; Largeur: 228px
}
#ScontentBar {
Border-Bottom: Black 1px solide; Border-Left: Solide noir 1px; Border-droite: Solide noir 1px; Border-Top: Solide noir 1px; Curseur: main; Hauteur: 15px; Padding-Bottom: 1px; Padding-gauche: 1px; Rembourrage à droite: 1px; Tableau de rembourrage: 1px; Position: absolue; En haut: 5px; Largeur: 100%
}
#SconTENTSUB {
Position: absolue; En haut: 28px; Largeur: 100%
}
A.A1: Hover {
Border-Bottom: # 4A8FF2 1px solide; Border-Left: # 4A8FF2 1px solide; Border-droite: # 4A8FF2 1PX solide; Border-top: # 4A8FF2 1PX solide; Hauteur de ligne: 13pt; Largeur: 83px; 12px;: 1869fe; Aligner: centre
}
A.a1: lien {
Couleur: #ffffff; Décoration du texte: aucune; 12px; aligner: centre
}
Td {
Taille de police: 12px
}
.pos {
Position: relative
}
</ style>
</ head>
<body>
<br> Chine <br> Jinzhou <br> Adieu à la guerre mondiale <br> luo <br> Huang Perte <br> Jianghuai <br> BMW <br> Exagération <br> America <br> Ajax <br> Asp <br> Java <br> jQuery
<Script Language = JavaScript>
var dragApproved = false
var zcor, xcor, ycor
fonction drag_onclick () {
if (search1.drag.checked == true) dragApproved = false
else dragApproved = true
}
fonction moveScontentMain () {
if (event.button == 1 && dragApproved && search1.drag.checked == true) {
zcor.style.pixelleft = tempvar1 + event.clientx-xcor
zcor.style.pixeltop = tempvar2 + event.clienty-cycor
LeftPos = document.all.scontentmain.style.pixelleft-document.body.scrollleft
toppos = document.all.scontentmain.style.pixeltop-document.body.scrolltop
retourner faux
}
}
fonction dragscontentmain () {
if (! document.all)
Retour
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")
fonction aa (e)
{
if (e == 0) alert ("/ n- = moteur de recherche de page 1.0 = / n / n / n- réécrivez-vous un code / n- corrigez le bug du saut de glisser de la souris, / n- continue de sélectionner s'il faut glisser ...");
retour;
}
fonction Cose ()
{
Si (confirmez ("Cette fenêtre sera fermée bientôt. Si vous confirmez, veuillez appuyer sur OK! / N / N Si vous souhaitez rouvrir cette fenêtre, veuillez actualiser la page."))
SCONTENTMAIN.STYLE.DISPlay = 'Aucun'
autre
SCONTENTMAIN.STYLE.DISPlay = ''
}
Document.Write ('<div id = "SCONTENTMAIN"> <form name = "search1" onsubmit = "return findInPage (this.word.value);"> <div id = "SCONTENTBAR"> Cliquez sur la case ci-dessous borderColorlight = "# 000000" borderColordark = "# fffff" bgcolor = "# 0099cc" class = font1> <tr bgcolor = "# 2d96ff"> <td colspan = "2" align = "Center"> <intry type = "text" name = "word" size = "30" on on onChange = "n = 0;" onfocus = window.document.search1.word.value = "" style = "background-iMage: url ()"> </td> </tr> <tr bgcolor = "# cccccc"> <td> <entrée = "checkbox" name = "glisser" value = "search" lingway = javascript onClick = "return gagn_onclick ()"> glisser la fenêtre avec la fenêtre < href = "# top"> </a> </td> <td align = "Center"> <input type = "soumi" name = "soumi" 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 = 'Aucun'
autre
scontentsub.style.display == ''
}
fonction offdisplay () {
if (ScontentsUb.style.display == 'Aucun')
scontentsub.style.display = ''
autre
scontentsub.style.display == 'Aucun'
}
fonction staticize () {
w2 = document.body.scrollleft + LeftPos
h2 = document.body.scrolltop + toppos
ScontentMain.style.left = W2
SCONTENTMAIN.STYLE.TOP = H2
}
window.onscroll = staticize
fonction getword ()
{
var tr
}
fonction findword (w)
{
pour (var i = 0; i <wordList.options.length; i ++)
if (wordList.options [i] .text == w)
{
WordList.options [i] .selected = true
Output.value = wordExpln [i]
Résultat.style.visibilité = "visible"
Retour vrai
}
retourner faux
}
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;
fonction FindInPage (STR)
{
var txt, i, trouvé;
if (str == "")
retourne false;
if (ns4)
{
if (! win.find (str))
tandis que (win.find (str, false, vrai))
n ++;
autre
n ++;
Si (n == 0) alerte (str + "... Le texte que vous recherchez n'existe pas. / N / N Veuillez essayer d'entrer les mots clés de la page et de reourser! / N / n et venez de ne pas entrer"? "ou": "pour trouver aussi !!!");
}
si (ie4)
{
txt = win.Document.body.CreateExtrange ();
pour (i = 0; i <= n && (find = txt.findText (str))! = false; i ++)
{
txt.movestart ("caractère", 1);
txt.moveend ("textEdit");
}
si (trouvé)
{
txt.movestart ("caractère", -1);
txt.findText (str);
txt.select ();
txt.scrolLintoView ();
n ++; }
autre
{
if (n> 0)
{
n = 0;
FindInPage (STR);
}
autre
alert (str + "... Le texte que vous recherchez n'existe pas. / N / N Veuillez essayer d'entrer les mots clés de la page et de revoir! / N / N et veillez à ne pas entrer"? "ou": "pour trouver aussi !!!");
}
}
retourne false;
}
self.onerror = null;
currentx = currenty = 0;
quit = null;
LASTSCROLLX = 0; LASTSCROLLY = 0;
Ns = (document.layers)? 1: 0;
C'est-à-dire = (document.all)? 1: 0;
</cript>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.