Home > Web Front-end > JS Tutorial > 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

PHPz
Release: 2018-09-28 17:59:46
forward
2131 people have browsed it

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>
Copy after login

The above is the entire content of this chapter, more For more related tutorials, please visit JavaScript Video Tutorial!

Related labels:
source:jb51.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template