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

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

WBOYOriginal: 2016-05-16 15:40:571173Durchsuche

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>

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jquery implementiert abschließbare Countdown-Werbe-Spezialeffekte code_jqueryNächster Artikel：jquery implementiert abschließbare Countdown-Werbe-Spezialeffekte code_jquery

In Verbindung stehende Artikel

Mehr sehen