Este artículo describe el método de JS+CSS para imitar la función de búsqueda de caracteres web del navegador. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <html>
<Evista>
<title> JS+CSS Función de búsqueda de caracteres web imitados </title>
<estilo type = text/css>
CUERPO {
Tamaño de fuente: 12px; Espaciado de letras: 1pt; Línea de altura: 22px; Margen-izquierda: 5pt; Margen-top: 5pt
}
#ScontentMain {
Altura: 30px; Posición: Absoluto; Arriba: 28px; Ancho: 228px
}
#ScontentBar {
Border-fondo: negro 1px sólido; Border-izquierda: negro 1px sólido; Border-Right: negro 1px sólido; Borderto: negro 1px sólido; Cursor: mano; Altura: 15px; Botón de relleno: 1px; RODING-LAFE: 1PX; Right-Right: 1px; Almohadilla: 1px; Posición: Absoluto; Arriba: 5px; Ancho: 100%
}
#ScontentSub {
Posición: Absoluto; Arriba: 28px; Ancho: 100%
}
A.A1: Hover {
Border-Bottom: #4A8FF2 1PX Solid; Border-izquierda: #4A8FF2 1PX Solid; Border-Right: #4A8FF2 1PX Solid; Border-Top: #4A8FF2 1PX Solid; Línea de altura: 13pt; Ancho: 83px; 12px;: 1869fe; Alinear: Centro
}
A.A1: Link {
Color: #ffffff; Decoración de texto: ninguna; 12px; alinearse: centro
}
TD {
Tamaño de fuente: 12px
}
.los {
Posición: pariente
}
</style>
</ablo>
<Body>
<br> China <br> Jinzhou <br> Adiós a la Guerra Mundial <br> Luo <br> Huang Loss <br> Jianghuai <br> BMW <br> Exageration <br> America <br> Ajax <br> ASP <br> Java <br> jQuery
<Script Language = JavaScript>
var dragAppRoved = false
var zcor, xcor, ycor
función drag_onclick () {
if (search1.drag.ecked == true) dragAppRoved = false
else dragAppRoved = verdadero
}
función MoveScontentMain () {
if (event.button == 1 && dragapproved && search1.drag.ecked == 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
devolver falso
}
}
función dragScontentMain () {
if (! document.all)
Devolver
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 = nueva función ("dragAppRoved = false")
función aa (e)
{
if (e == 0) alerta ("/n- = Motor de búsqueda de página 1.0 =/n/n/n- Reescribe algún código/n- arregle el error del salto de arrastre del mouse,/n- Sigue seleccionando si arrastrar ...");
devolver;
}
función cose ()
{
if (confirmar ("Esta ventana se cerrará pronto. Si confirma, presione OK! /N /N Si desea volver a abrir esta ventana, actualice la página")))
ScontentMain.style.display = 'Ninguno'
demás
Scontentmain.style.display = ''
}
document.Write ('<dividi = "ScontentMain"> <form de formular = "Search1" onSubMit = "return findInpage (this.word.value);"> <divi id = "scontentBar"> haga clic en la casilla de verificación a continuación, mantenga presionada y arrastre </div> <div it = "scontentsub" "style =" visibility: show "> <stap cellpadding =" 2 "cellspacing =" 0 "0". borderColorlight = "#000000" BorderColordark = "#fffff" bgcolor = "#0099cc" class = font1> <tr bgcolor = "#2d96ff"> <td colspan = "2" align = "centro"> <input type = "text" name = "word" size = "30" onchange = "n;" " onfocus = window.document.search1.word.value = "" style = "background-image: url ()"> </td> </tr> <tr bgcolor = "#ccccccc"> <td> <input type = "checkbox" name = "arrastre" value = "buscar" lenguaje = javaScript oncclick = "return drag_onclick ()" href = "#top"> </a> </td> <td align = "center"> <input = "subt" name = "subt" 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
función onDisplay () {
if (scontentsub.style.display == '')
Scontentsub.style.display = 'Ninguno'
demás
scontentsub.style.display == ''
}
función offdisplay () {
if (scontentsub.style.display == 'Ninguno')
scontentsub.style.display = ''
demás
scontentsub.style.display == 'Ninguno'
}
function 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
}
función findword (w)
{
para (var i = 0; i <wordlist.options.length; i ++)
if (wordlist.options [i] .Text == W)
{
WordSist.options [i] .selected = True
Output.Value = WordExpln [i]
Resultado.style.visibility = "Visible"
Devolver verdadero
}
devolver falso
}
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;
FUNCIONA FINDINPAGE (STR)
{
var txt, i, encontrado;
if (str == "")
devolver falso;
if (ns4)
{
if (! win.find (str))
while (win.find (str, falso, verdadero))
n ++;
demás
n ++;
if (n == 0) alerta (str + "... el texto que está buscando no existe. /N /N, intente ingresar las palabras clave en la página y busque nuevamente! /N /n y tenga cuidado de no ingresar"? "o": "¡Para encontrar también!");
}
if (es decir)
{
txt = win.document.body.createTextrange ();
para (i = 0; i <= n && (encontrado = txt.findText (str))! = falso; i ++)
{
txt.movestart ("carácter", 1);
txt.Moveend ("TextEdit");
}
if (encontrado)
{
txt.movestart ("personaje", -1);
txt.findText (str);
txt.select ();
txt.scrollintoview ();
n ++; }
demás
{
if (n> 0)
{
n = 0;
FindInpage (STR);
}
demás
alerta (str + "... el texto que está buscando no existe. /N /N, intente ingresar las palabras clave en la página y busque nuevamente! /N /n y tenga cuidado de no ingresar"? "o": "¡Para encontrar también!");
}
}
devolver falso;
}
self.onerror = nulo;
currentx = currenty = 0;
whatit = null;
dastScrollx = 0; dastScrolly = 0;
Ns = (document.layers)? 1: 0;
IE = (Document.all)? 1: 0;
</script>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.