Cet article décrit la méthode de JS pour réaliser l'effet flottant de l'image. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
Description: Lorsque vous ouvrez la page Web, vous verrez des images qui flottent constamment, cliquez pour vous connecter à d'autres pages; Il aura un effet clé!
Copiez le code comme suit: <html>
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8">
<Title> Test </Title>
<style type = "text / css">
#All {largeur: 100%; hauteur: 3000px;}
</ style>
</ head>
<body>
<div id = "all">
<div id = "img" style = "position: absolu; z-index: 99;">
<a href = "#" Target = "_ Blank"> <img src = "images / opvti.jpg" style = "curseur: pointeur;" style = "curseur: pointeur;" /> </a>
<script linguisse = "javascript">
<! - commencer
var xpos = document.body.clientwidth - 20;
var ypos = document.body.clientHeight / 2;
var étape = 1;
Var Delay = 10;
var hauteur = 0;
var hoffset = 0;
var woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
intervalle var;
IMG.STYLE.TOP = YPOS;
fonction changepos () {
width = document.body.clientwidth;
hauteur = document.body.clientHeight;
Hoffset = img.offsetheight;
Woffset = img.offsetwidth;
img.style.left = xpos + document.body.scrollleft;
img.style.top = ypos + document.body.scrolltop;
if (yon) {
YPOS = YPOS + Step;
} autre {
ypos = ypos - étape;
}
if (ypos <0) {
yon = 1;
ypos = 0;
}
if (ypos> = (height - hoffset)) {
yon = 0;
ypos = (hauteur - hoffset);
}
if (xon) {
xpos = xpos + étape;
} autre {
xpos = xpos - étape;
}
if (xpos <0) {
xon = 1;
xpos = 0;
}
if (xpos> = (largeur - woffset)) {
xon = 0;
xpos = (largeur - woffset);
}
}
fonction start () {
img.visibilité = "visible";
interval = setInterval ('ChangePos ()', delay);
}
fonction pause_resume () {
if (pause) {
ClearInterval (interval);
pause = false;
} autre {
interval = setInterval ('ChangePos ()', delay);
pause = true;
}
}
commencer();
// fin ->
</cript>
</div>
</div>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.