Heim >Web-Frontend >js-Tutorial >js implementiert den Code der schwebenden Anzeigenleiste, die oben auf der Website geschlossen werden kann
js implementiert den Code der schwebenden Anzeigenleiste, die oben auf der Website geschlossen werden kann
- PHPznach vorne
- 2016-05-16 15:40:452156Durchsuche
Dieser Artikel stellt hauptsächlich die js-Implementierung des Floating-Ad-Barcodes vor, der oben auf der Website geschlossen werden kann, und beinhaltet die Implementierungstechnik von Javascript basierend auf Mausereignissen, um Seitenelementstile zu bedienen Nachfolgend
In diesem Artikel werden die Beispiele erläutert. Verwenden Sie js, um das abschließende schwebende Werbebanner oben auf der Website zu realisieren. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:
Dies ist ein Werbebannercode, der normalerweise oben auf der Website schwebt und geschlossen werden kann. Das Design ist schön und einfach, mit einer Schaltfläche zum Schließen, die sich an die Breite anpassen lässt Die Webseite und die klaren Farben werden es mögen.
Der Screenshot des Laufeffekts ist wie folgt:
Der Online Die Demo-Adresse lautet wie folgt:
http://demo.jb51.net/js/2015/js-top-float-clase-able-adv-codes/
Der spezifische Code lautet wie folgt:
<html>
<head>
<title>网站页首可关闭广告条</title>
<style type="text/css">
<!--
body { margin: 0px;padding: 0px;text-align: center;}
TD {FONT-SIZE: 12px; COLOR: #333;}
#topadv {BORDER-BOTTOM: #e2e2e2 1px solid;}
-->
</style>
</head>
<body>
<SCRIPT>
function floatadv(){
document.getElementById("topadv").style.display="none";
}
</SCRIPT>
<p id=topadv>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="4%" height="30" align="center"><img src="images/kids.gif" width="15" height="14"></td>
<td width="82%"><a href="//www.jb51.net/">脚本之家</a>是国内专业的网站建设资源、脚本编程学习类网站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</td>
<td width="14%" align="right"><a style="CURSOR: hand" onClick=floatadv()><img
src="images/close.gif" width=84 height=11 hspace="6" border=0></a></td>
</tr>
</table>
</p>
</body>
</html>Das Obige ist der gesamte Inhalt dieses Kapitels. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial!