JS implementiert einen Werbecode auf der linken Seite, auf den geklickt werden kann, um die Javascript-Kenntnisse zu erweitern und zu schließen-js-Tutorial-php.cn

JS implementiert einen Werbecode auf der linken Seite, auf den geklickt werden kann, um die Javascript-Kenntnisse zu erweitern und zu schließen

WBOY

Freigeben： 2016-05-16 15:40:57

Original

1243 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die JS-Implementierung von linksseitigem Werbecode, der zum Erweitern und Schließen angeklickt werden kann. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Was hier vorgestellt wird, ist die JS-Implementierung des linken Werbecodes, der zum Erweitern und Schließen auf Webseiten angeklickt werden kann. Die Leistung ist ähnlich wie bei Couplet-Anzeigen, die Bedienungsmethode ist jedoch unterschiedlich Es wird auf der linken Seite des Bildschirms ausgeblendet, aber nicht vollständig ausgeblendet. Wenn Sie auf „Anzeigen“ klicken, wird die Anzeige erneut geöffnet. Diese Art von Anzeige kann das Benutzererlebnis verbessern Webseite.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-click-show-close-style-adv-codes/

Der spezifische Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.