Maison > Article > interface Web > JS implémente un code publicitaire de gauche sur lequel on peut cliquer pour développer et fermer les compétences Javascript

JS implémente un code publicitaire de gauche sur lequel on peut cliquer pour développer et fermer les compétences Javascript

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

L'exemple de cet article décrit l'implémentation JS d'un code publicitaire de gauche sur lequel on peut cliquer pour développer et fermer. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Ce qui est présenté ici est l'implémentation JS du code publicitaire du côté gauche sur lequel on peut cliquer pour développer et fermer les pages Web. Les performances sont similaires aux publicités en couplet, mais la méthode de fonctionnement est différente lorsque vous cliquez dessus. caché sur le côté gauche de l'écran, mais il n'est pas complètement caché. Affichez une annonce avec une barre d'image verticale, et lorsque vous cliquez sur "Afficher", l'annonce sera rouverte. Ce type d'annonce peut améliorer l'expérience utilisateur de l'écran. page web.

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/js-click-show-close-style-adv-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>网页上可点击展开、关闭的左侧广告代码</title>
</head>
<body>
<div id="Bar1190_big" style="position:absolute;z-index:9;top:10px;left:0px;width:100px;height:300px;">
<div id="AD1190" style="width:100px;height:300px;text-align:center;float:none" class="adSpace">
<a href="#" target="_blank"><img width="100" height="300" src="images/2401.jpg" alt="" border="0"></a>
</div>
<div style="height:18px;width:100px;background:#CCCCCC;text-align:right;line-height:18px;">
<a style="font-size:12px;cursor:pointer;" onClick="bar1190_hidden()">关 闭</a> 
</div>
</div>
<div id="Bar1190_small" style="position:absolute;z-index:9;top:10px;display:none;left:0px;width:20px;height:300px;">
<div id="AD1190" style="width:20px;height:300px;text-align:center;float:none" class="adSpace">
<a href="#" target="_blank"><img width="25px" height="300" src="images/2402.jpg" alt="" border="0"></a>
</div>
<div style="height:18px;width:25px;background:#CCCCCC;text-align:right;line-height:18px;">
<a style="font-size:12px;cursor:pointer;" onClick="bar1190_show()">展开</a>
</div>
</div>
<script type="text/javascript">
function bar1190_show(){
document.getElementById('Bar1190_big').style.display='';
document.getElementById('Bar1190_small').style.display='none';
}
function bar1190_hidden(){
document.getElementById('Bar1190_big').style.display='none';
document.getElementById('Bar1190_small').style.display='';
}
var autohide1190 = setTimeout("bar1190_hidden()",6000);
</script>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation JavaScript 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：jquery implémente des effets spéciaux publicitaires avec compte à rebours fermable code_jqueryArticle suivant：jquery implémente des effets spéciaux publicitaires avec compte à rebours fermable code_jquery

Articles Liés

Voir plus