Maison >interface Web >js tutoriel >jquery implémente des publicités de couplet flottantes des deux côtés qui peuvent être fermées_jquery

jquery implémente des publicités de couplet flottantes des deux côtés qui peuvent être fermées_jquery

WBOYoriginal: 2016-05-16 15:29:181354parcourir

Affichage de l'effet :

Description du code :

L'effet spécial jquery du code publicitaire du couplet flottant sur les côtés gauche et droit peut être désactivé. Il ne sera affiché que lorsque la résolution grand écran est supérieure à 1024 pixels. Car compte tenu de l’affichage des publicités distiques sur un écran étroit, l’expérience utilisateur est vraiment médiocre.

Cliquez sur le bouton de fermeture pour fermer individuellement le code d'annonce du couplet flottant de votre côté.

var screen_w = screen.width; if(screen_w>1024){duilian.show();} dans le code js est utilisé par jquery pour déterminer la résolution du navigateur. Vous pouvez modifier les annonces de couplet flottantes fermables sur la gauche et. côtés droits. La valeur de résolution du navigateur requise par le code. Si vous ne souhaitez pas porter de jugement, vous pouvez supprimer ces deux phrases et ajouter le débordement CSS code.duilian{top:260px;position:absolute; :hidden; display:none;} display:none; le supprimer ne jugera pas la résolution du navigateur.

Cliquez sous le code d'annonce de couplet flottant des deux côtés pour fermer la moitié respective de l'annonce de couplet.

Une partie du code html est la suivante :

<!--下面是对联广告的html代码结构-->
<div class="duilian duilian_left">
 <div class="duilian_con">对联的内容</div>
 <a href="#" class="duilian_close">X关闭</a>
</div>
<div class="duilian duilian_right">
 <div class="duilian_con">对联的内容</div>
 <a href="#" class="duilian_close">X关闭</a>
</div>

Une partie du code CSS est la suivante :

/*下面是对联广告的css代码*/

.duilian{top:260px;position:absolute; width:102px; overflow:hidden; display:none;}
.duilian_left{ left:6px;}
.duilian_right{right:6px;}
.duilian_con{border:#CCC solid 1px; width:100px; height:300px; overflow:hidden;}
.duilian_close{ width:100%; height:24px; line-height:24px; text-align:center; display:block; font-size:13px; color:#555555; text-decoration:none;}

Certains des codes d'annonce de couplet flottant sur les côtés gauche et droit sont les suivants :

<script type="text/javascript">
$(document).ready(function(){
 var duilian = $("div.duilian");
 var duilian_close = $("a.duilian_close");
 var screen_w = screen.width;
 if(screen_w>1024){duilian.show();}
 $(window).scroll(function(){
  var scrollTop = $(window).scrollTop();
  duilian.stop().animate({top:scrollTop+260});
 });
 duilian_close.click(function(){
  $(this).parent().hide();
  return false;
 });
});
</script>

Le code ci-dessous est très simple à implémenter le code publicitaire du couplet jquery flottant des deux côtés

Contenu de cette rubrique :

Couplets de codes publicitaires flottants des deux côtés.

Exemple :

Code publicitaire Couplet implémenté par jquery

L'exemple de code est le suivant :

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/**
* 对联广告，可以两边飘浮
* by www.jb51.net
*/
$(document).ready(function(){
 var duilian = $("div.duilian");
 var duilian_close = $("a.duilian_close");
 var window_w = $(window).width();
 if(window_w>1000){duilian.show();}
 $(window).scroll(function(){
  var scrollTop = $(window).scrollTop();
  duilian.stop().animate({top:scrollTop+100});
 });
 duilian_close.click(function(){
  $(this).parent().hide();
  return false;
 });
});
</script>
<style>
/*对联广告的css代码*/
.duilian{top:100px;position:absolute; width:102px; overflow:hidden; display:none;}
.duilian_left{ left:6px;}
.duilian_right{right:6px;}
.duilian_con{border:red solid 1px; width:100px; height:300px; overflow:hidden;}
.duilian_close{ width:100%; height:24px; line-height:24px; text-align:center; display:block; font-size:13px; color:#555555; text-decoration:none;}
</style>
</head>
<body>
<!--对联广告的html代码结构-->
<div class="duilian duilian_left">
 <div class="duilian_con">对联的内容</div>
 <a href="#" class="duilian_close">X关闭</a>
</div>
<div class="duilian duilian_right">
 <div class="duilian_con">对联的内容</div>
 <a href="#" class="duilian_close">X关闭</a>
</div>
<p style="height:1000px;"></p>
</body>
</html>

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Implémentation d'un code de navigation à droite de type Baidu Encyclopedia basé sur Jquery avec le code source download_jqueryArticle suivant：Implémentation d'un code de navigation à droite de type Baidu Encyclopedia basé sur Jquery avec le code source download_jquery

Articles Liés

Voir plus