Este artigo descreve o método do JS+CSS para imitar a função de pesquisa de personagens da web do navegador. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <html>
<head>
<Title> JS+CSS Função de pesquisa de personagens da web </ititure>
<tipo de estilo = texto/css>
CORPO {
Tamanho de fonte: 12px; Espacamento de cartas: 1pt; Altura da linha: 22px; Margem-esquerda: 5pt; Margin-top: 5pt
}
#scontentmain {
Altura: 30px; Posição: Absoluto; Topo: 28px; Largura: 228px
}
#scontentBar {
Fundo da borda: preto 1px sólido; Border-Ift: Black 1px sólido; Right-direita: Black 1px sólido; Top de borda: preto 1px sólido; Cursor: mão; Altura: 15px; Botting-Bottom: 1px; Preenchimento-esquerda: 1px; Right-right: 1px; Top-top: 1px; Posição: Absoluto; Topo: 5px; Largura: 100%
}
#scontentsub {
Posição: Absoluto; Topo: 28px; Largura: 100%
}
A.A1: Hover {
Bottom de fronteira: #4A8FF2 1PX Solid; Interação da borda: #4A8FF2 1PX Solid; Right-Right: #4A8FF2 1PX Solid; Top de borda: #4A8FF2 1PX SOLID; Altura de linha: 13pt; Largura: 83px; 12px;: 1869FE; Alinhe: centro
}
A.A1: Link {
Cor: #ffffff; Decoração de texto: Nenhum; 12px; alinhe: centro
}
TD {
Size da fonte: 12px
}
.pos {
Posição: relativa
}
</style>
</head>
<Body>
<br> China <br> Jinzhou <br> Adeus com a Guerra Mundial <br> luo <br> Huang Perda <br> Jianghuai <br> BMW <br> Exageramento <br> America <br> Ajax <br> asp <br> java <br> JQuery
<Idioma do script = javascript>
var dragApproved = false
var zcor, xcor, ycor
função drag_onClick () {
if (search1.drag.checked == true) dragapproved = false
caso contrário, dragApproved = true
}
função moveScontentMain () {
if (event.button == 1 && dragApproved && search1.drag.checked == true) {
zcor.style.pixelleft = tempvar1+event.clientx-xcor
zcor.style.pixeltop = tempvar2+event.clienty-yycor
leftPos = document.all.scontentmain.style.pixelleft-cocument.body.scrollleft
toppos = document.all.scontentmain.style.pixeltop-cocument.body.scrolltop
retornar falso
}
}
função dragScontentMain () {
if (! document.all)
Retornar
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 = nova função ("dragapproved = false")
função aa (e)
{
if (e == 0) ALERT ("/n- = Página Pesquisa Motor 1.0 =/n/n/n- Reescreva algum código/n- Corrija o bug do salto de arrasto do mouse,/N- Continue selecionando se deve arrastar ...");
retornar;
}
função cose ()
{
Se (confirmar ("Esta janela será fechada em breve. Se você confirmar, pressione OK! /N /N Se você quiser reabrir esta janela, atualize a página."))))))
scontentmain.style.display = 'nenhum'
outro
scontentmain.style.display = ''
}
document.write('<div id="scontentmain"><form name="search1" onSubmit="return findInPage(this.Word.value);"><div id="scontentbar">Click the check box below, hold down and drag</div><div id="scontentsub"" style="visibility: show"><table cellpadding="2" cellpacing="0" BorderColorlight = "#000000" BorderColordark = "#fffff" bgcolor = "#0099cc" class = font1> <tr bgcolor = "#2d96ff"> <td colspan = "2" align = "center"> <but type = "text" 0 = "Word"; onfocus = window.document.search1.word.value = "" style = "background-imagem: url ()"> </td> </tr> <tr bgcolor = "#cccccc"> <td> <input type = "check" name "drag" = "search" "> javascript onClick =" Name "=" drag "=" ryick ""> href = "#top"> </a> </td> <td align = "Center"> <input type = "submit" name = "submit" value = "search"> </td> </tr> </morm> </ 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
função ondisplay () {
if (scontentsub.style.display == '')
scontentsub.style.display = 'nenhum'
outro
scontentsub.style.display == ''
}
function offdisplay () {
if (scontentsub.style.display == 'nenhum')
scontentsub.style.display = ''
outro
scontentsub.style.display == 'nenhum'
}
function staticize () {
w2 = document.body.scrollleft+leftPos
h2 = document.body.scrolltop+toppos
scontentmain.style.left = w2
scontentmain.style.top = h2
}
window.onscroll = staticize
função getword ()
{
var tr
}
função 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]
Resultado.style.visibility = "visível"
retornar verdadeiro
}
retornar 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;
função findinpage (str)
{
var txt, i, encontrado;
if (str == "")
retornar falso;
if (ns4)
{
if (! win.find (str))
while (win.find (str, falso, verdadeiro))
n ++;
outro
n ++;
se (n == 0) alerta (str + "... o texto que você está procurando não existe. /n /n, tente inserir as palavras -chave na página e procurar novamente! /n /n e tenha cuidado para não entrar"? "ou": "Encontrar também !!!");
}
se (ie4)
{
txt = win.document.body.createtexTrange ();
for (i = 0; i <= n && (encontrado = txt.findText (str))! = false; i ++)
{
txt.movestart ("personagem", 1);
txt.movend ("textedit");
}
se (encontrado)
{
txt.movestart ("personagem", -1);
txt.findText (str);
txt.Select ();
txt.ScrollIntoView ();
n ++; }
outro
{
se (n> 0)
{
n = 0;
FindInpage (STR);
}
outro
alerta (str + "... o texto que você está procurando não existe. /n /n, por favor, tente inserir as palavras -chave na página e procure novamente! /n /n e tenha cuidado para não entrar"? "ou": "para encontrar também !!!");
}
}
retornar falso;
}
self.onerror = nulo;
currentx = currenty = 0;
whatit = null;
lastScrollx = 0; lastScrolly = 0;
Ns = (document.layers)? 1: 0;
Ie = (document.all)? 1: 0;
</Script>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.