Une cour JavaScript avec de petites compétences d'effet spécial_javascript

Un petit effet spécial de parade nuptiale JavaScript est créé ici. L'effet est le suivant :

Non seulement l'effet de l'image ci-dessous peut apparaître, mais il peut également faire suivre à la figure la rotation de la souris. un petit exemple non modifié, basé sur cet exemple, peut rendre la cour plus amusante. Hommes et messieurs, pouvez-vous envoyer à votre petite loli une page web comme celle-ci ? Génial.

Collez le code :

Copiez le code Le code est le suivant :

;/title> ;
/javascript ">
//Pourquoi onload est utilisé, car lorsque j'ai initialisé le div d'horloge dans le code javascript, la page de débogage a constaté qu'il n'était pas implémenté
//Plus tard, j'ai découvert la raison, le html le code est analysé d’avant en arrière. Lorsque le code JavaScript est analysé en premier, lors de l'ajout de nœuds enfants au corps
//, le corps non analysé est introuvable. Vous devez donc d'abord analyser le corps. Il existe deux méthodes. L'une consiste à écrire
// et l'autre consiste à ajouter la méthode onload dans la balise body.
window.onload=function(){
init();
};
//Définissez un tableau div pour stocker 12 div
//Parce que la relation à 12 positions div, donc d'abord déterminer le point et le rayon pour calculer la position du div
var divs=[]
var loveBaby=["I","爱","你","!","宝","贝","你","爱","我","我","Mian","Mian"]
var CX=300;
var CY=300;//-- ---- ----------------N'y a-t-il pas d'unités pour les coordonnées de localisation dans la page Web ?
var R=150;
var divCenterNode;//Pour contrôler la position du point central, définissez la variable globale
//Définissez une fonction d'initialisation
function init(){
/ / Créez un div au point central (vous pouvez écrire votre objet de cour)
divCenterNode=document.createElement("div");
divCenterNode.innerHTML="Tingting, épouse-moi!"; body.appendChild(divCenterNode);
divCenterNode.style.left=(CX-50) "px"
divCenterNode.style.top=(CY-30) "px"
// Créer 12; divs pour former une horloge interdite et les placer dans le corps
for(var x=1;x<=12;x ){
//Create div
var divNode=document.createElement(" div" );
divNode.innerHTML=loveBaby[x-1];
//L'objet body n'a pas besoin d'être obtenu comme les autres objets, il a été encapsulé dans la bibliothèque js.
document.body.appendChild(divNode);
divs.push(divNode);
}
//Repositionnez l'élément div à chaque démarrage de startClock()
/*
En fait, pour obtenir l'effet de rotation, vous devez continuellement décaler ou
repositionner. Cependant, si vous effectuez une boucle, vous ne pouvez pas contrôler la durée de démarrage de la fonction à intervalles, donc
l'objet window le fournit. une méthode en ce moment.
*/
startClock();

}
//Décalage de div
var offset=0;//Décalage de degré
//Changer la position Définir un fonction séparée pour le positionnement et la rotation
function startClock(){
for(var x=1;x<=12;x ){
var div = divs
//; Le degré de chaque nombre
var dushu=30*x offset;
//Valeur d'angle* Math.PI /180 = Valeur du radian
var divLeft = CX R*Math.sin(dushu*Math .PI /180);
div.style.left=divLeft "px";
var divTop = CY-R*Math.cos(dushu*Math.PI/180); divTop "px";
}
offset =50;
//Rappelez cette fonction à un certain intervalle
//Calculez une expression après la valeur en millisecondes spécifiée. Le premier paramètre est une expression et le deuxième paramètre est le temps
setTimeout(startClock,80);//Méthode de l'objet fenêtre
}
//Définissez cette horloge pour qu'elle se déplace vers différentes positions lorsque la souris se déplace
function clockMove(event){
CX=event.clientX;//coordonnée x de la position de la souris
CY=event.clientY;//coordonnée y de la position de la souris
divCenterNode.style. left=(CX-50) "px";
divCenterNode.style.top=(CY-30) "px"

}
head>






À l'origine, je voulais créer un affichage d'horloge qui pouvait tourner et fonctionner. Donc le nom dans le code est lié à l’horloge, alors ne vous inquiétez pas, ma chère. Je suis nouveau sur Javascript et je pense que Javascript est très puissant.