Cet article décrit l'effet flottant d'image simple implémenté par JS. Partagez-le pour votre référence, comme suit:
Utilisation d'objets de fenêtre pour obtenir un effet flottant d'une image
1. Il y a une div publicitaire que nous voulons contrôler, son point de départ (0,0)
2. Réglez les vitesses horizontales et verticales
3. Contrôle AD Div Mobile
1) Si le div AD atteint la frontière
2) Si nous atteignons la frontière, nous définissons la vitesse pour se déplacer à l'envers
<! 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"> <éread> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <tone> unt titled document </Title> <style> div {position: absolue;} img {position: absolue; Filtre: alpha (opacité = 100); / * ie * / -moz-opacity: 1; / * moz + ff * / opacité: 1; / * les navigateurs qui prennent en charge CSS3 (FF 1.5 prend également en charge) * /} </ style> </ head> <body> <div id = "divimg"> <img src = "123.jpg"> </ div> scénarios " type = "text / javascript"> // Obtenez l'objet div où l'image est var img = document.getElementById ("divimg"); // Réglez les coordonnées du coin supérieur gauche de la div, les coordonnées du point de départ var x = 10, y = 10; // définit la vitesse de voyage de l'image var xspeed = 2, yspeed = 1; // Définissez la hauteur flottante maximale et la largeur de l'image var w = document.DocumentElement.ClientWidth-110, h = document.DocumentElement.ClientHeight-160; fonction flotimg () {// Comparez si le disque d'image atteint la limite // Si nous atteignons la frontière, nous contrôlons l'image pour changer la direction si (x> w || x <0) {xspeed = -XSpeed; } if (y> h || y <0) {yspeed = -yspeed; } // Si la limite n'est pas atteinte, définissez les coordonnées du coin supérieur gauche de l'image // Définissez la valeur de coordonnée Coordonnée + vitesse x + = xspeed; y + = yspeed; img.style.top = y + "px"; img.style.left = x + "px"; // Delay Appelez la fonction flotimg (), et appelez setTimeout ("flotimg ()"), 40); } flotimg (); </cript> </ body> </html>Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des effets et techniques de commutation JavaScript", "Résumé des effets et techniques de recherche JavaScript", "Résumé des erreurs Javascript et des techniques de débogage" Algorithmes et techniques de traversée JavaScript ", et" Résumé de l'utilisation des opérations mathématiques JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.