Cet article décrit la méthode de rotation automatique de l'image d'arrière-plan en fonction de la vitesse de déplacement de la souris. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! 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">
<adal>
<Title> JS réalise que l'image tourne rapidement autour de la souris </Title>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312">
</ head>
<body>
<script linguisse = "javascript">
<! -
var images = '/ favicon.ico';
montant var = 7;
Var Speed = 1;
var runtime = 0;
var cntr = 0;
var xcnttr = 100;
Var Pulse = 25;
var xpos = 0;
var ypos = 0;
varier;
Var Temp;
/ * Si vous utilisez une image plus grande ou plus petite que celle que j'ai utilisée
le curseur sera hors centre.
var updown = -10;
var leftright = -5;
if (document.all) {
document.write ('<div id = "iediv" style = "position: absolu; top: 0px; gauche: 0px">');
document.write ('<div id = "c" style = "position: relatif">');
pour (n = 0; n <montant; n ++)
document.write ('<img src = "' + images + '" style = "position: absolu; top: 0px; gauche: 0px; visibilité: caché">');
Document.Write ('</div>');
Document.Write ('</div>');
fonction suivantmouse () {
Xpos = document.body.scrollleft + event.x + updown;
Ypos = document.body.scrolltop + event.y + leftright;
}
document.onMouseMove = suivantmouse;
}
else if (document.layers) {
Window.CaptureEvents (Event.MousMove);
fonction xFollowMouse (evnt) {
Xpos = evnt.pagex + updown;
Ypos = evnt.pagey + leftright;
}
window.onMouseMove = xFollowmMouse;
pour (ns = 0; ns <montant; ns ++)
Document.Write ("<Layer Name = 'N" + NS + "' Left = '0' top = '0' visibilité = 'Mide'> <img src = '" + images + "'> </ couche>");
}
fonction msi () {
if (document.layers) {
pour (i = 0; i <ns; i ++)
{
temp = "n" + i
document.layers [0] .Visibility = 'show';
document.layers [0] .top = ypos + cntr * math.cos ((runtime + i * 4.5) / 5);
document.layers [0] .left = xpos + cntr * math.sin ((runtime + i * 4.5) / 5);
}
cntr + = 1;
Runtime + = Speed;
stp = setTimeout ('msi ()', 10);
if (cntr> = 100)
{
cntr = 100;
vitesse = 2,5;
pour (i = 0; i <ns; i ++)
{
temp = "n" + i
document.layers [temp] .Visibility = 'show';
document.layers [temp] .top = ypos + cntr * math.cos ((runtime-100) * i / 90);
document.layers [temp] .left = xpos + cntr * math.sin ((runtime-100) * i / 90);
}
}
if (runtime> 182)
{
vitesse = 0,5;
pour (i = 0; i <ns; i ++)
{
temp = "n" + i
document.layers [temp] .top = ypos + xcntr * math.cos (((runtime-182) + i * 4.5) / 5);
document.layers [temp] .left = xpos + xcntr * math.sin (((runtime-182) + i * 4.5) / 5) * math.cos ((runtime-182) / 5);
}
}
}
else if (document.all) {
for (i = 0; i <iediv.all.c.all.length; i ++)
{
iediv.all.c.all [0] .style.visibilité = «visible»;
iediv.all.c.all [0] .style.top = ypos + cntr * math.cos ((runtime + i * 4.5) / 5);
iediv.all.c.all [0] .style.left = xpos + cntr * math.sin ((runtime + i * 4.5) / 5);
}
cntr + = 1;
Runtime + = Speed;
stp = setTimeout ('msi ()', 10);
if (cntr> = 100)
{
cntr = 100;
vitesse = 2,5;
for (i = 0; i <iediv.all.c.all.length; i ++)
{
iediv.all.c.all [i] .style.visibilité = «visible»;
iediv.all.c.all [i] .style.top = ypos + cntr * math.cos ((runtime-100) * i / 90);
iediv.all.c.all [i] .style.left = xpos + cntr * math.sin ((runtime-100) * i / 90);
}
}
if (runtime> 182)
{
vitesse = 0,5;
for (i = 0; i <iediv.all.c.all.length; i ++)
{
iediv.all.c.all [i] .style.top = ypos + xcnttr * math.cos (((runtime-182) + i * 4.5) / 5);
iediv.all.c.all [i] .style.left = xpos + xcntr * math.sin (((runtime-182) + i * 4.5) / 5) * math.cos ((runtime-182) / 5);
}
}
}
if (runtime> 210)
{
xcnttr- = 10;
}
if (document.layers)
_y = -Window.InnerWidth-90;
else if (document.all)
_y = -Document.body.ClientWidth-90;
if (xcntr <= _y)
{
Runtime = 0;
vitesse = 1;
cntr = 0;
xcnttr = 100;
}
}
MSI ()
// ->
</cript>
<script linguisse = "javascript">
<! -
fonction selectall (thefield) {
var tempval = eval ("document". + thefield)
tempval.focus ()
tempval.select ()
}
// ->
</cript>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.