Cet article décrit la méthode de JS pour déplacer du texte avec la souris. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
Il s'agit d'un code de fonctionnalité de souris très simple. Lors du déplacement de la souris sur une page Web, la souris est déplacée par une chaîne de texte suivant la souris.
Copiez le code comme suit: <html>
<adal>
<style type = "text / css">
.Spanstyle {
Couleur: 000000; Taille de police: 10 pt; Position: absolue; En haut: -50px; Visibilité: visible
}
</ style>
<cript>
var x, y
var étape = 18 // c'est l'intervalle entre deux caractères adjacents
Var Flag = 0
var message = "wulin.com www.vevb.com Bienvenue à votre visite!" // Mettez le texte dont vous avez besoin pour afficher ici
message = message.split ("") // décomposer la chaîne dans un tableau
var xpos = new Array () // Créez un tableau pour enregistrer les coordonnées X de chaque position
pour (i = 0; i <= message.length-1; i ++) {// attribue d'abord une valeur initiale à chaque élément
xpos [i] = - 50
}
var ypos = new Array () // Créez un tableau pour enregistrer les coordonnées Y de chaque position
pour (i = 0; i <= message.length-1; i ++) {
ypos [i] = - 200
}
fonction MoveHandler (e) {// gérer les événements de mouvement de la souris
x = (document.layers)? e.pagex: document.body.scrollleft + event.clientx // dirige la position horizontale de la souris selon le navigateur
y = (document.layers)? e.pagey: document.body.scrolltop + event.clienty // enregistrez la position verticale de la souris
drapeau = 1 // La position de la souris a changé et doit être recalculé
}
Fonction MakeNake () {
if (flag == 1 && document.all) {// si c'est IE
pour (i = message.length-1; i> = 1; i--) {// Traiter les files d'attente des coordonnées
xpos [i] = xpos [i-1] + étape // déplacer chaque coordonnée de données une grille et ajouter l'espacement des caractères
ypos [i] = ypos [i-1]
}
xpos [0] = x + étape // Écrivez de nouvelles données dans la queue de la file d'attente de données de coordonnées
ypos [0] = y
pour (i = 0; i <message.length-1; i ++) {
var thisspan = eval ("span" + (i) + ". style") // générer l'objet d'opération actuel spanx.style
thisSpan.posleft = xpos [i]
thisSpan.postop = ypos [i]
}
}
else if (flag == 1 && document.layers) {// si c'est ns
pour (i = message.length-1; i> = 1; i--) {// Traiter les files d'attente des coordonnées
xpos [i] = xpos [i-1] + étape // déplacer chaque coordonnée de données une grille et ajouter l'espacement des caractères
ypos [i] = ypos [i-1]
}
xpos [0] = x + étape // Écrivez de nouvelles données dans la queue de la file d'attente de données de coordonnées
ypos [0] = y
for (i = 0; i <message.length-1; i ++) {// modifie les coordonnées de la couche où chaque mot est situé en fonction des données du tableau
var thispan = eval ("document.span" + i) // générer le document d'objet opérationnel actuel.spanx
thisSpan.left = xpos [i]
thisSpan.top = ypos [i]
}
}
var timer = setTimeout ("MakeNake ()", 30) // Après 30 millisecondes, ajustez à nouveau la position de chaque caractère selon la situation.
}
</cript>
</ head>
<body bgcolor = "ffffff" onload = "kakingNake ()">
<cript>
<! - Début de JavaScript -
// ici, nous générons une durée en tant que conteneur pour chaque mot
pour (i = 0; i <= message.length-1; i ++) {
document.write ("<span id = 'span" + i + "' class = 'spanstyle'>")
document.write (message [i])
document.write ("</span>")
}
// spécifie le processus de gestion des événements de mouvement de la souris
if (document.layers) {
Document.CaptureEvents (Event.MousMove);
}
document.onMouseMove = MoveHandler;
// - fin de javascript - ->
</cript>
</docy>
<br> <b> Cet effet est-il très cool? </b> </br>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.