Maison > Article > interface Web > Code d'effet de réduction de bannière publicitaire implémenté par jquery_jquery

Code d'effet de réduction de bannière publicitaire implémenté par jquery_jquery

WBOYoriginal: 2016-05-16 15:40:521574parcourir

L'exemple de cet article décrit le code d'effet de réduction de la bannière publicitaire implémenté par jquery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Voici une démonstration de l'effet de réduction d'une bannière publicitaire. Après avoir cliqué dessus, la page Web affichera une grande annonce. Après avoir cliqué sur "Fermer" avec la souris, l'annonce sera réduite. . Vous êtes invités à en tirer des leçons.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/jquery-banner-show-close-style-codes/

Le code spécifique 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>
<title>一个Banner广告收缩效果</title>
<style type="text/css">
*{margin:0; padding:0;}/*为了方便 直接这样重置了*/
#main{margin:0 auto; width:960px;}
#banner{display:none; margin:0 auto; width:960px; height:160px; background:url(images/banner.png) no-repeat; position:relative;}
#close{display:block; width:50px; height:22px; text-align:center; line-height:22px; border:1px #ddd solid; background:#000; color:#fff; font-size:12px; float:right; cursor:pointer;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$
(
function()
{
$("#banner").slideDown();
var Up=function(){$("#banner").slideUp(1500)}
setTimeout(Up,3000);
$("#close").click
(
function()
{
$("#banner").slideToggle
(
600,function()
{
if($("#banner").css("display") == "none")
{
$("#close").text("打开");
}
else
{
$("#close").text("关闭");
}
}
);
}
);
}
);
</script>
</head>
<body>
<div id="main">
<div id="banner"></div>
<span id="close">关闭</span>
</div>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.

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：JS implémente les compétences code_javascript de l'effet de menu télescopique dynamique d'étirement horizontalArticle suivant：JS implémente les compétences code_javascript de l'effet de menu télescopique dynamique d'étirement horizontal

Articles Liés

Voir plus