Este artículo describe el método de girar automáticamente la imagen de fondo basada en la velocidad de movimiento del mouse. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 transitional.dtd"> ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<title> JS realiza la imagen de girar rápidamente alrededor del mouse </title>
<meta http-oquiv = "content-type" content = "text/html; charset = gb2312">
</ablo>
<Body>
<script language = "javaScript">
<!-
var imágenes = '/favicon.ico';
VAR Cantidad = 7;
Vel Speed = 1;
VAR tiempo de ejecución = 0;
var cntr = 0;
var xcntr = 100;
var pulso = 25;
var xPos = 0;
var ypos = 0;
variar;
var temp;
/*Si usa una imagen más grande o más pequeña que la que he usado
el cursor estará fuera del centro. Alter las 2 variables a continuación para centrarlo.*/
var updown = -10;
var leftright = -5;
if (document.all) {
document.write ('<div id = "iediv" style = "posición: absoluto; top: 0px; izquierda: 0px">');
document.write ('<div id = "c" style = "posición: relativo">');
para (n = 0; n <cantidad; n ++)
document.write ('<img src = "'+images+'" style = "posición: absoluto; top: 0px; izquierda: 0px; visibilidad: oculto">');
document.write ('</div>');
document.write ('</div>');
function sheatMouse () {
XPOS = document.body.scrollleft+event.x+updown;
YPOS = document.body.scrolltop+event.y+leftright;
}
document.onmouseMove = SEATMOUSE;
}
else if (document.layers) {
Window.CaptureEvents (Event.MouseMove);
función xfollowmouse (evnt) {
XPOS = EVNT.PAGEX+updown;
YPOS = EVNT.PAGEY+LEFTRIGHT;
}
Window.onMouseMove = xfollowMouse;
para (ns = 0; ns <cantidad; ns ++)
document.write ("<layer name = 'n"+ns+"' left = '0' top = '0' visibilidad = 'hide'> <img src = '"+imágenes+"'> </lapa>");
}
función msi () {
if (document.layers) {
para (i = 0; i <ns; i ++)
{
temp = "n"+i
document.layers [0] .visibility = 'show';
document.layers [0] .top = YPOS+CNTR*MATH.COS ((tiempo de ejecución+i*4.5)/5);
document.layers [0] .left = XPOS+CNTR*MATH.SIN ((tiempo de ejecución+i*4.5)/5);
}
CNTR+= 1;
Tiempo de ejecución+= velocidad;
stp = setTimeout ('msi ()', 10);
if (cntr> = 100)
{
CNTR = 100;
velocidad = 2.5;
para (i = 0; i <ns; i ++)
{
temp = "n"+i
document.layers [temp] .visibility = 'show';
document.layers [temp] .top = yPos+cntr*math.cos ((tiempo de ejecución-100)*i/90);
document.layers [temp] .left = XPOS+CNTR*MATH.SIN ((Runtime-100)*I/90);
}
}
if (tiempo de ejecución> 182)
{
velocidad = 0.5;
para (i = 0; i <ns; i ++)
{
temp = "n"+i
document.layers [temp] .top = yPos+xcntr*math.cos (((tiempo de ejecución-182)+i*4.5)/5);
document.layers [temp] .left = xPos+xcntr*math.sin (((tiempo de ejecución-182)+i*4.5)/5)*math.cos ((tiempo de ejecución-182)/5);
}
}
}
else if (document.all) {
para (i = 0; i <iediv.all.c.all.length; i ++)
{
iediv.all.c.all [0] .style.visibility = 'visible';
iediv.all.c.all [0] .style.top = ypos+cntr*math.cos ((tiempo de ejecución+i*4.5)/5);
iediv.all.c.all [0] .style.left = xPos+cntr*math.sin ((tiempo de ejecución+i*4.5)/5);
}
CNTR+= 1;
Tiempo de ejecución+= velocidad;
stp = setTimeout ('msi ()', 10);
if (cntr> = 100)
{
CNTR = 100;
velocidad = 2.5;
para (i = 0; i <iediv.all.c.all.length; i ++)
{
iediv.all.c.all [i] .style.visibility = 'visible';
iediv.all.c.all [i] .style.top = yPOS+cntr*math.cos ((tiempo de ejecución-100)*i/90);
iediv.all.c.all [i] .style.left = xpos+cntr*math.sin ((tiempo de ejecución-100)*i/90);
}
}
if (tiempo de ejecución> 182)
{
velocidad = 0.5;
para (i = 0; i <iediv.all.c.all.length; i ++)
{
iediv.all.c.all [i] .style.top = yPOS+xcntr*math.cos (((tiempo de ejecución-182)+i*4.5)/5);
iediv.all.c.all [i] .style.left = xPos+xcntr*math.sin (((tiempo de ejecución-182)+i*4.5)/5)*math.cos ((tiempo de ejecución-182)/5);
}
}
}
if (tiempo de ejecución> 210)
{
xcntr- = 10;
}
if (document.layers)
_y = -window.innerWidth-90;
else if (document.all)
_y = -document.body.clientwidth-90;
if (xcntr <= _y)
{
Tiempo de ejecución = 0;
velocidad = 1;
CNTR = 0;
xcntr = 100;
}
}
msi ()
//->
</script>
<script language = "javaScript">
<!-
función selectAll (thefield) {
var tempval = eval ("documento."+thefield)
tempval.focus ()
tempval.select ()
}
//->
</script>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.