Implémentation d'annonces flottantes plein écran basées sur les compétences javascript

Implémentation d'annonces flottantes plein écran basées sur les compétences javascript_javascript

WBOY

Libérer： 2016-05-16 15:07:19

original

1734 Les gens l'ont consulté

L'exemple de cet article est de partager avec vous comment mettre en œuvre des publicités flottantes plein écran en utilisant javascript pour votre référence. Le contenu spécifique est le suivant

Principales méthodes d'utilisation

Largeur de la zone visible de la page Web : document.body.clientWidth;
La hauteur de la zone visible de la page web : document.body.clientHeight;

Largeur de la zone visible de la page web : document.body.offsetWidth (y compris la largeur des lignes latérales)
La hauteur de la zone visible de la page web : document.body.offsetHeight (y compris la largeur du bord

) ;

setInterval

L'action setInterval est utilisée pour appeler des fonctions, des méthodes ou des objets à certains intervalles lors de la lecture d'une animation. Vous pouvez utiliser cette action pour mettre à jour les variables de la base de données ou mettre à jour l'affichage de l'heure.

Le format de syntaxe de l'action setInterval est le suivant :

 setInterval(function,interval[,arg1,arg2,......argn])
   setInterval(object,methodName,interval[,arg1,arg2,.....argn])

Copier après la connexion

Le premier format est la syntaxe par défaut de la fonction setInterval dans le panneau d'actions standard, et le deuxième format est la méthode utilisée dans les actions en mode expert.
Le paramètre function est un nom de fonction ou une référence à une fonction anonyme.
Le paramètre object spécifie un objet dérivé de l'objet Object. methodName spécifie la méthode à appeler dans le paramètre object.
Interval spécifie le temps entre deux appels à function ou methodName, en millisecondes. Les arg1 suivants et ainsi de suite sont des paramètres facultatifs, utilisés pour spécifier les paramètres passés à function ou methodName.
L'intervalle de temps défini par setInterval est inférieur à la fréquence d'images de l'animation (telle que 10 images par seconde, équivalente à 100 millisecondes), et la fonction est appelée à un intervalle de temps aussi proche que possible de l'intervalle. Et l'action updateAfterEvent doit être utilisée pour garantir que l'écran est actualisé à une fréquence suffisante. Si l'intervalle est supérieur à la fréquence d'images de l'animation, il n'est appelé qu'à chaque fois que la tête de lecture entre dans une certaine image afin de réduire l'impact de chaque actualisation de l'écran.

clearInterval

Le rôle de l'action clearInterval est d'effacer l'appel à la fonction setInterval

Son format de syntaxe est le suivant :
ClearInterval(intervalid);

Exemples d'effets publicitaires sur mobile

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>简单JS动画实例 广告移动效果</title>
  </head>
  <body>
    <div id="one" style="background-color:red; position:absolute; left:0; top:0; height:100px; height:100px; ">
      移动广告
    </div>
 
    <script type="text/javascript">
      var x=0;    //对象X轴位置
      var y=0;    //对象Y轴位置
      var xs = 10;  //对象X轴移动速度
      var ys = 10;  //对象Y轴移动速度
 
      var one = document.getElementById('one'); 
 
      function move(){
        x += xs; 
        y += ys; 
        one.style.left = x; 
        one.style.top = y; 
        if (x > document.body.clientWidth - one.offsetWidth-20 || x<0) {
          xs = -1*xs;     //速度取反
        }
 
        if (y > document.body.clientHeight - one.offsetHeight-20 || y<0){
          ys = -1*ys; 
        }
      }
      var obj = setInterval('move()', 100); 
 
      one.onmouseover = function(){  //
        clearInterval(obj); 
      }
 
      one.onmouseout = function (){
        obj = setInterval('move()', 100); 
      }
 
    </script>
  </body>
</html>

Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Implémentation d'annonces flottantes plein écran basées sur les compétences javascript_javascript