Este artículo describe el método de JS para mover el texto con el mouse. Compártelo para su referencia. El análisis específico es el siguiente:
Este es un código de característica de mouse muy simple. Al mover el mouse en una página web, el mouse se mueve mediante una cadena de texto después del mouse.
Copie el código de la siguiente manera: <html>
<Evista>
<style type = "text/css">
.spanstyle {
Color: 000000; Tamaño de fuente: 10pt; Posición: Absoluto; Arriba: -50px; Visibilidad: visible
}
</style>
<script>
var x, y
Var Step = 18 // Este es el intervalo entre dos caracteres adyacentes
bandera var = 0
Var Message = "wulin.com www.vevb.com ¡Bienvenido a su visita!" // Pon el texto que necesita mostrar aquí
Message = Message.split ("") // descompone la cadena en una matriz
var xpos = new Array () // Cree una matriz para grabar las coordenadas X de cada posición
para (i = 0; i <= message.length-1; i ++) {// asigna un valor inicial a cada elemento primero
XPOS [i] =-50
}
var yPos = new Array () // Cree una matriz para registrar las coordenadas y de cada posición
para (i = 0; i <= message.length-1; i ++) {
YPOS [i] =-200
}
función MoveHandler (e) {// manejar eventos de movimiento del mouse
x = (document.layers)? E.Pagex: document.body.scrollleft+event.clientx // dirigir la posición horizontal del mouse de acuerdo con el navegador
y = (document.layers)? E.Pagey: document.body.scrolltop+event.clienty // registra la posición vertical del mouse
bandera = 1 // La posición del mouse ha cambiado y necesita ser recalculada
}
function MakeNake () {
if (flag == 1 && document.all) {// Si es, es decir
para (i = message.length-1; i> = 1; i--) {// Processing coorden colas
XPOS [I] = XPOS [I-1]+Paso // Mueve cada dato de coordenada una cuadrícula y agregue espaciado de caracteres
YPOS [i] = YPOS [I-1]
}
XPOS [0] = x+paso // Escribir nuevos datos en la cola de la cola de datos de coordenadas
YPOS [0] = y
para (i = 0; i <message.length-1; i ++) {
var thisSpan = eval ("span"+(i)+". Style") // Generar el objeto de operación actual Spanx.style
thisSpan.posleft = xPos [i]
thisspan.postop = yPos [i]
}
}
else if (flag == 1 && document.layers) {// Si es ns
para (i = message.length-1; i> = 1; i--) {// Processing coorden colas
XPOS [I] = XPOS [I-1]+Paso // Mueve cada dato de coordenada una cuadrícula y agregue espaciado de caracteres
YPOS [i] = YPOS [I-1]
}
XPOS [0] = x+paso // Escribir nuevos datos en la cola de la cola de datos de coordenadas
YPOS [0] = y
para (i = 0; i <message.length-1; i ++) {// cambia las coordenadas de la capa donde cada palabra se encuentra de acuerdo con los datos de la matriz
var estaPan = eval ("document.span"+i) // Generar el objeto de operación actual documento.spanx
thisspan.left = xPos [i]
thisSpan.top = yPos [i]
}
}
VAR TIMER = SetTimeOut ("MakeNake ()", 30) // Después de 30 milisegundos, ajuste la posición de cada carácter nuevamente de acuerdo con la situación.
}
</script>
</ablo>
<Body bgcolor = "ffffff" onload = "makenake ()">
<script>
<!- comienzo de JavaScript-
// Aquí generamos un tramo como contenedor para cada palabra
para (i = 0; i <= message.length-1; i ++) {
document.write ("<span id = 'span"+i+"' class = 'spanstyle'>")
document.write (mensaje [i])
document.write ("</span>")
}
// especificar el proceso de manejo de eventos de movimiento del mouse
if (document.layers) {
document.captureevents (event.mouseMove);
}
document.onmouseMove = MoveHandler;
// - Fin de JavaScript - ->
</script>
</body>
<br> <b> ¿Es este efecto muy bueno? </b> </br>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.