Aqui está um efeito especial do JavaScript Courthip, o efeito é o seguinte:
Não apenas o efeito da figura abaixo pode aparecer, mas a figura também pode ser girada com o mouse. Este é apenas um exemplo simples e não modificado. Com base neste exemplo, ele pode tornar o namoro mais divertido. Homens relutantes, você pode postar essa página na web no seu pequeno loli? Ótimo.
Publique o código:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Insira o título aqui </ititure>
<style type = "text/css">
corpo{
borda: 1px vermelho sólido;
Largura: 1000px;
Altura: 1000px;
margem: 0px automático;
preenchimento: 0px;
Cor: verde;
}
/*
Arraste o objeto do fluxo de documentos, usando propriedades como esquerda, direita, superior, inferior, etc. em relação a
É mais próximo do objeto pai mais posicionado para o posicionamento absoluto. Se esse objeto pai não existir,
Por objeto corporal. E sua cascata é definida pelo atributo Z-Index
*/
div {
Posição: Absoluto;
}
</style>
<script type = "text/javascript">
// Por que devo usar o Onload? Porque quando eu inicializo a div do relógio no código JavaScript, a página de depuração descobriu que não havia implementação
// Mais tarde, descobri o motivo, o código HTML foi analisado de frente para trás. Ao analisar o código JavaScript primeiro, vá para o corpo
// Ao adicionar nós filhos, o corpo não resolvido não pode ser encontrado. Então você deve primeiro analisar o corpo. Existem dois métodos, um é
O método de escrita de //, de outra maneira pode ser adicionar o método de Onload à etiqueta corporal.
window.onload = function () {
init ();
};
// define uma matriz div para armazenar 12 divs
// Devido à relação entre as 12 posições de div, primeiro determine o ponto e o raio para calcular a posição da div
var divs = [];
var lovebaby = ["i", "amor", "você", "você", "bao", "bei", "amor", "amor", "eu", "wan", "wan", "wan", "wan" "wan" "wan" "wan" wan "w e "" 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" w um "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "wan" wan "" wan "" wan "" wan "wan" wan "" "wan" "wan" "" "" "" wan "wan" um "" "wan" "" 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 divcenterNode; // A posição do ponto central deve ser controlada e as variáveis globais devem ser definidas
// Defina uma função inicializada
function init () {
// Crie uma div na posição do ponto central (você pode escrever o objeto de namoro)
DivcenterNode = document.createElement ("div");
Divcenternode.innerhtml = "Tingting, case comigo!";
document.body.appendChild (DivcenterNode);
divcenternode.style.left = (CX-50)+"px";
divcenternode.style.top = (Cy-30)+"px";
// Crie 12 divs para formar um relógio proibido e colocá -lo no corpo
for (var x = 1; x <= 12; x ++) {
// Crie uma div
var divnode = document.createElement ("div");
divnode.innerhtml = lovebaby [x-1];
// O objeto corporal não precisa ser obtido como outros objetos, e a biblioteca JS foi encapsulada.
document.body.appendChild (divnode);
divs.push (divnode);
}
// Toda vez que StartClock () é iniciado para reposicionar o elemento div
/*
De fato, para alcançar o efeito de rotação, é necessário compensar continuamente, ou
Reposicionamento, mas em loop, você não pode controlar quanto tempo leva para iniciar a função, então
No momento, o objeto de janela fornece um método.
*/
startClock ();
}
// Offset da div
var offset = 0; // Offset de grau
// Defina uma função para posicionar e girar a posição separadamente
função startClock () {
for (var x = 1; x <= 12; x ++) {
var div = divs [x-1];
// o grau de cada número
var dushu = 30*x+deslocamento;
// Valor do ângulo* Math.pi /180 = Valor do raio
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";
}
deslocamento+= 50;
// um certo intervalo, retorno de chamada esta função
// Uma expressão é calculada após o valor especificado de milissegundos. O primeiro parâmetro é a expressão, o segundo parâmetro é a hora
setTimeout (StartClock, 80); // Método de objeto de janela
}
// define este relógio para posições diferentes à medida que o mouse se move
função clockmove (evento) {
Cx = event.clientx; // a-coordenada da posição do mouse
Cy = event.clienty; // a coordenada y da posição do mouse
divcenternode.style.left = (CX-50)+"px";
divcenternode.style.top = (Cy-30)+"px";
}
</script>
</head>
<Body onMouseMove = "Clockmove (Evento)">
<!-
1. Exibir 12 números em um círculo
1/Crie 12 divs, atribua valores 1--12, respectivamente
2/localize 12 divs e forme um círculo.
->
</body>
</html>
Originalmente, eu queria fazer uma tela de relógio que pudesse girar e executar. Portanto, a nomeação no código está relacionada ao relógio, então não ficarei confuso, querido. Iniciantes em JavaScript, sinto que o JavaScript é muito poderoso.