Home > Article > Web Front-end > js implements the code of the floating ad bar that can be closed at the top of the website
js implements the code of the floating ad bar that can be closed at the top of the website
- PHPzforward
- 2016-05-16 15:40:452075browse
This article mainly introduces the js implementation of the floating ad bar code that can be closed at the top of the website, involving the implementation techniques of javascript based on mouse events to operate page element styles. Friends in need can refer to the following
This article explains the examples Use js to realize the closing floating advertising banner at the top of the website. Share it with everyone for your reference. The details are as follows:
This is an advertising banner code that usually floats at the top of the website and can be closed. The design is beautiful and simple, with a close button, adaptive to the width of the web page, and clear colors. I believe many friends will like it. .
The screenshot of the running effect is as follows:
The online demo address is as follows:
http://demo.jb51. net/js/2015/js-top-float-clase-able-adv-codes/
The specific code is as follows:
<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>The above is the entire content of this chapter, more For more related tutorials, please visit JavaScript Video Tutorial!