Utilisation de jQuery : ajout dynamique de petites annonces-js tutoriel-php.cn

Utilisation de jQuery : ajout dynamique de petites annonces

巴扎黑

Libérer： 2017-07-23 15:07:08

original

1214 Les gens l'ont consulté

Lors de la navigation sur des sites Web, certains sites Web placent toujours des publicités dans le coin inférieur droit, le coin supérieur gauche ou à d'autres endroits.

J'ai essayé d'en créer un moi-même en utilisant jQuery. Le code est le suivant. S'il y a quelque chose qui ne va pas, faites-le moi savoir.

 1 <!DOCTYPE html> 2 <html xmlns=""> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5     <title></title> 6     <script src="jquery-1.8.3.js"></script> 7     <script type="text/javascript"> 8         $(function () { 9             $('#btn').click(function () {10                 //创建层11                 var divObj = $('<div style="width:200px;height:200px;position:absolute;right:0;bottom:0;background-color:orange"></div>').appendTo($('body'));12                 //创建右上角关闭按钮13                 $('<sapn style="float:right;cursor:pointer; border:3px solid gray">X</span>').click(function () {14                     $(this).parent().remove();15                 }).appendTo($(divObj));16                 //添加广告内容17 18             });19         });20     </script>21 </head>22 <body>23     <input type="button" name="name" value="显示效果" id="btn"/>24 </body>25 </html>

Copier après la connexion

Le rendu est. comme suit

Concernant cet effet, j'ai les réflexions suivantes :

1 Vous pouvez ajouter une minuterie, compte à rebours '5S. fermer', et '4S fermer' indique aux utilisateurs que cette publicité n'est placée que temporairement et sera automatiquement fermée après 5 secondes. Cela peut améliorer l'expérience utilisateur. Nous savons tous que lors de la navigation sur certains sites Web, les publicités prennent toujours de la place et se déplacent. sous vos yeux. L'expérience utilisateur n'est certainement pas bonne. Très bonne, cela peut créer un bon équilibre entre les annonceurs et l'expérience utilisateur

2 La raison pour laquelle la couleur de fond est orange est parce que l'orange est un. couleur chaude. Expérience personnelle, si le fond publicitaire est Si la couleur est chaude, je suis plus disposé à le laisser rester un certain temps, par rapport à la publicité avec une couleur de fond froide

3. ce n'est qu'un petit code. Une fois que les maîtres ont terminé le contenu, ils peuvent l'encapsuler et il sera certainement plus pratique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Utilisation de jQuery : ajout dynamique de petites annonces