この記事では、Web サイトの上部で閉じることができるフローティング広告バーコードの JS 実装を主に紹介します。これには、ページ要素のスタイルを操作するためのマウス イベントに基づく JavaScript の実装テクニックが含まれます。以下の
この記事では、Web サイトの上部にある閉じるフローティング広告バナーを js を使用して実現する例について説明します。皆さんの参考に共有してください。詳細は次のとおりです:
これは通常、Web サイトの上部に表示され、閉じることができる広告バナー コードです。デザインは美しくシンプルで、ページの幅に合わせて閉じるボタンが付いています。
実行中のエフェクトのスクリーンショットは次のとおりです。
デモのアドレスは次のとおりです:
http://demo.jb51.net/js/2015/js-top-float-clase-able-adv-codes/
具体的なコードは次のとおりです:
<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>
上記はこの章の全内容です。その他の関連チュートリアルについては、JavaScript ビデオ チュートリアル をご覧ください。