Aquí hay un efecto especial de cortejo de JavaScript, el efecto es el siguiente:
No solo aparece el efecto de la siguiente imagen, sino que la figura también se puede girar con el mouse. Este es solo un ejemplo simple y no modificado. Según este ejemplo, puede hacer que el cortejo sea más divertido. Hombres reacios, ¿puedes publicar una página web así a tu pequeño loli? Excelente.
Publique el código:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<title> Insertar título aquí </title>
<style type = "text/css">
cuerpo{
borde: 1px sólido rojo;
Ancho: 1000px;
Altura: 1000px;
Margen: 0px Auto;
relleno: 0px;
Color: verde;
}
/*
Arrastre el objeto desde la secuencia de documentos, utilizando propiedades como izquierda, derecha, superior, inferior, etc. en relación con
Está más cerca del objeto principal más posicionado para el posicionamiento absoluto. Si dicho objeto principal no existe,
Por objeto del cuerpo. Y su cascada está definida por el atributo de índice Z
*/
div {
Posición: Absoluto;
}
</style>
<script type = "text/javaScript">
// ¿Por qué debería usar Onload? Porque cuando inicializo el DIV del reloj en el código JavaScript, la página de depuración descubrió que no había implementación
// Más tarde descubrí la razón, el código HTML se analizó de adelante hacia atrás. Al analizar el código JavaScript primero, vaya al cuerpo
// Al agregar nodos infantiles, no se puede encontrar el cuerpo no resuelto. Así que primero debes analizar el cuerpo. Hay dos métodos, uno es
El método de escritura de //, de otra manera puede ser agregar el método de Onload a la etiqueta del cuerpo.
window.onload = function () {
init ();
};
// Defina una matriz Div para almacenar 12 divs
// Debido a la relación entre las 12 posiciones DIV, primero determine el punto y el radio para calcular la posición del DIV
var divs = [];
varilla lovebaby = ["yo", "amor", "tú", "tú", "bao", "bei", "amor", "amor", "yo", "wan", "wan", "wan", "wan" "wan" "wan" "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" un "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan "wan" wan " un "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" "wan" "wan" "" wan "" wan "" wan "" "wan" wan "wan" wan "wan" wan "" un "" "wan" "" "wan" "" wan "" "wan" "" wan "" "wan" "" wan "" "wan" "wan" "wan" "wan" "" wan "" "wan" "" wan "" wan "" "wan" "wan"
var cx = 300;
var cy = 300; // ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var r = 150;
var diventernode; // La posición del punto central debe controlarse y se deben establecer variables globales
// Defina una función inicializada
función init () {
// Crear un div en la posición del punto central (puede escribir el objeto de cortejo)
diventerNode = document.createElement ("div");
DivCenternode.innerhtml = "Tingting, Cásate conmigo!";
document.body.appendChild (diventerNode);
divcenternode.style.left = (cx-50)+"px";
divcenternode.style.top = (cy-30)+"px";
// Crear 12 divs para formar un reloj prohibido y colocarlo en el cuerpo
para (var x = 1; x <= 12; x ++) {
// crear un div
var divnode = document.createElement ("div");
divnode.innerhtml = lovebaby [x-1];
// El objeto del cuerpo no necesita obtenerse como otros objetos, y la biblioteca JS ha sido encapsulado.
document.body.appendChild (Divnode);
divs.push (divnode);
}
// Cada vez que StartClock () se inicia a reposicionar el elemento Div
/*
De hecho, para lograr el efecto de rotación, es necesario compensar continuamente, o
Reposicionamiento, pero en bucle, no puede controlar cuánto tiempo lleva iniciar la función, luego
En este momento, el objeto de la ventana proporciona un método.
*/
startClock ();
}
// desplazamiento de Div
VAR offset = 0; // desplazamiento de grado
// Defina una función para posicionar y girar la posición por separado
función startClock () {
para (var x = 1; x <= 12; x ++) {
var div = divs [x-1];
// El grado de cada número
var dushu = 30*x+offset;
// Valor de ángulo* Math.pi /180 = Valor de rayos
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);
div.style.top = divtop+"px";
}
desplazamiento+= 50;
// un cierto intervalo, devolución de llamada esta función
// Se calcula una expresión después del valor de milisegundos especificado. El primer parámetro es la expresión, el segundo parámetro es el tiempo
setTimeout (startClock, 80); // Método del objeto de la ventana
}
// Defina este reloj en diferentes posiciones a medida que el mouse se mueve
function clockmove (evento) {
Cx = event.clientx; // La coordenada x de la posición del mouse
Cy = event.clienty; // La coordenada y de la posición del mouse
divcenternode.style.left = (cx-50)+"px";
divcenternode.style.top = (cy-30)+"px";
}
</script>
</ablo>
<Body onMouseMove = "Clockmove (evento)">
<!-
1. Muestra 12 números en un círculo
1/Crear 12 divs, asignar valores 1--12 respectivamente
2/Localizar 12 divs y formar un círculo.
->
</body>
</html>
Originalmente quería hacer una pantalla de reloj que pudiera girar y correr. Entonces, el nombramiento en el código está relacionado con el reloj, por lo que no me confundiré, querido. Principiantes en JavaScript, siento que JavaScript es muy poderoso.