Este artigo descreve o método do JS para mover o texto com o mouse. Compartilhe para sua referência. A análise específica é a seguinte:
Este é um código de recurso do mouse muito simples. Ao mover o mouse em uma página da web, o mouse é movido por uma série de texto seguindo o mouse.
Copie o código da seguinte forma: <html>
<head>
<style type = "text/css">
.SPanstyle {
Cor: 000000; Tamanho de fonte: 10pt; Posição: Absoluto; Topo: -50px; Visibilidade: visível
}
</style>
<Cript>
var x, y
var step = 18 // Este é o intervalo entre dois caracteres adjacentes
VAR Flag = 0
var message = "wulin.com www.vevb.com Bem -vindo à sua visita!" // Coloque o texto que você precisa exibir aqui
message = message.split ("") // decompõe a string em uma matriz
var xpos = new Array () // Crie uma matriz para registrar as coordenadas x de cada posição
for (i = 0; i <= message.Length-1; i ++) {// Atribua um valor inicial a cada elemento primeiro
xpos [i] =-50
}
var ypos = new Array () // Crie uma matriz para registrar as coordenadas y de cada posição
for (i = 0; i <= message.Length-1; i ++) {
ypos [i] =-200
}
função movehandler (e) {// manipula eventos de movimento do mouse
x = (document.layers)? e.pagex: document.body.scrollleft+event.clientx // direcionar a posição horizontal do mouse de acordo com o navegador
y = (document.layers)? E.Pagey: document.body.scrolltop+event.clienty // Registre a posição vertical do mouse
sinalizador = 1 // A posição do mouse mudou e precisa ser recalculada
}
function makeNake () {
if (flag == 1 && document.all) {// se for ie
for (i = message.length-1; i> = 1; i--) {// Filas de coordenadas de processamento
xpos [i] = xpos [i-1]+etapa // Mova cada uma coordenada dados Uma grade e adicione o espaçamento de personagens
ypos [i] = ypos [i-1]
}
xpos [0] = x+etapa // Escreva novos dados na cauda da fila de dados de coordenadas
ypos [0] = y
for (i = 0; i <message.length-1; i ++) {
var thSspan = avaliar ("span"+(i)+". estilo") // gerar o objeto de operação atual spanx.style
estespan.posleft = xpos [i]
estespan.postop = ypos [i]
}
}
caso contrário, se (sinalizador == 1 && document.layers) {// se for ns
for (i = message.length-1; i> = 1; i--) {// Filas de coordenadas de processamento
xpos [i] = xpos [i-1]+etapa // Mova cada uma coordenada dados Uma grade e adicione o espaçamento de personagens
ypos [i] = ypos [i-1]
}
xpos [0] = x+etapa // Escreva novos dados na cauda da fila de dados de coordenadas
ypos [0] = y
for (i = 0; i <message.length-1; i ++) {// altere as coordenadas da camada onde cada palavra está localizada de acordo com os dados da matriz
var thispan = avaliar ("document.span"+i) // gerar o documento atual do objeto de operação.spanx
estespan.left = xpos [i]
estespan.top = ypos [i]
}
}
var timer = setTimeout ("MakeNake ()", 30) // Após 30 milissegundos, ajuste a posição de cada caractere novamente de acordo com a situação.
}
</script>
</head>
<corpo bgcolor = "ffffff" onLload = "makeNake ()">
<Cript>
<!- Início do JavaScript-
// Aqui, geramos uma extensão como um contêiner para cada palavra
for (i = 0; i <= message.Length-1; i ++) {
document.write ("<span id = 'span"+i+"' class = 'spanystyle'>")
document.write (mensagem [i])
document.write ("</span>")
}
// Especifique o processo de lidar com eventos de movimento do mouse
if (document.layers) {
document.captureEvents (Event.MouseMove);
}
document.onMousEMove = moveHandler;
// - Fim do JavaScript - ->
</script>
</body>
<br> <b> esse efeito é muito legal? </b> </br>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.