javascript实现右下角广告框效果
打造生动广告框：JavaScript右下角展示秘籍
你是否曾想过在网页右下角展示一个引人注目的广告框，吸引用户的目光？今天，我将带你如何使用原生JavaScript实现这一效果。我们将利用绝对定位，创建一个可点击关闭的广告框，无论展示动图、视频或其他内容，都能轻松应对。
让我们开始吧！
一、HTML结构搭建
我们需要创建一个基本的HTML结构。这个结构包括一个包含广告内容的div，一个用于关闭广告的X按钮，以及一个重置广告显示的入口。
```html
" 结合html5,这可以是一个gif,swf或者video">
X
```
二、CSS样式设计
接下来，我们需要为广告框和按钮添加一些基本样式。这里我们使用了绝对定位来固定广告框在右下角，同时设置了按钮的样式和位置。
```css
advbox{
width: px;
height: 300px;
position: fixed;
right: 0;
bottom: 0;
}
.adv{
width: 380px;
height: 270px;
border: 1px solid a00;
position: relative;
}
icon{
display: block;
width: 24px;
height: 24px;
color: 0c0;
font-size: 30px;
font-weight: bolder;
position: absolute;
right: 2px;
top: 2px;
cursor: pointer;
}
```
三、JavaScript交互设计
我们需要添加一些JavaScript代码来处理用户与广告的交互。这里我们为关闭按钮和重置入口分别添加了点击和鼠标悬停事件。当点击关闭按钮时，广告框会被隐藏；当鼠标悬停在重置入口上时，广告框会被显示。
```javascript
(function(){
var $ = function(id){
return document.getElementById(id);
};
$("icon").onclick=function(){
$("advbox").className = "hide"; // 点击关闭按钮隐藏广告框
}; $("resetadv").onmouseover=function(){ // 鼠标悬停在重置入口上显示广告框 $("advbox").className = "show"; };})();