用js写一个浮动广告
时间: 2023-12-10 07:05:04 浏览: 67
以下是一个简单的示例,使用 JavaScript 和 CSS 实现一个浮动广告:
HTML 代码:
```
<div class="floating-ad">
<a href="#"><img src="path/to/image.jpg" alt="Floating Ad"></a>
<button class="close-btn">×</button>
</div>
```
CSS 代码:
```css
.floating-ad {
position: fixed;
bottom: 20px;
right: 20px;
width: 300px;
height: 250px;
border: 1px solid #ccc;
background-color: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
z-index: 9999;
}
.close-btn {
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
border: none;
background-color: #ccc;
color: #fff;
font-size: 16px;
line-height: 20px;
text-align: center;
cursor: pointer;
}
```
JavaScript 代码:
```js
// 获取浮动广告元素和关闭按钮元素
const floatingAd = document.querySelector('.floating-ad');
const closeBtn = document.querySelector('.close-btn');
// 关闭按钮点击事件处理程序
closeBtn.addEventListener('click', () => {
floatingAd.style.display = 'none';
});
// 页面滚动事件处理程序
window.addEventListener('scroll', () => {
const scrollY = window.scrollY || window.pageYOffset;
const adBottom = floatingAd.offsetTop + floatingAd.offsetHeight;
const isAdVisible = adBottom > scrollY && floatingAd.offsetTop < scrollY + window.innerHeight;
if (isAdVisible) {
floatingAd.style.visibility = 'visible';
} else {
floatingAd.style.visibility = 'hidden';
}
});
```
说明:
- `position: fixed` 属性使广告固定在浏览器窗口中。`bottom` 和 `right` 属性设置广告距离窗口底部和右侧的距离。
- 广告元素包含一个图片链接和一个关闭按钮,按钮使用绝对定位使其在广告元素的右上角。
- 当点击关闭按钮时,广告元素的 `display` 属性设置为 `none`,使其消失。
- 当页面滚动时,使用 `window.scrollY` 或 `window.pageYOffset` 获取当前滚动位置。如果广告元素的底部在可见窗口内,则将其 `visibility` 属性设置为 `visible`,否则设置为 `hidden`。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<html> <head> <title> New Document </title> <meta NAME="Generator" CONTENT="EditPlus"> <meta NAME="Author" CONTENT=""> <meta NAME="Keywords" CONTENT=""> <meta NAME="Description" CONTENT=""> <script> var x=50,y=60//浮动广告的初始位置 var xin =true,yin=true; //xin为真则向右运动,否则向左运动, //yin为真则向下运动,否则向上运动 var step=1;//移动的距离 var delay=10;//移动的时间间隔 function floatAD(){ var L=T=0;//L为左边界T为上边界 var R=document.body.offsetWidth-document.getElementById("fly").offsetWidth; //层移动到右边界 var B=document.body.offsetHeight-document.getElementById("fly").offsetHeight; //层移动到下边界 document.getElementById("fly").style.left=x;//层移动后的左边界 document.getElementById("fly").style.top=y;//层移动后的上边界 x=x+step*(xin?1:-1);//判断水平方向 if(x<L){ xin=true;x=L }//层到达边界后的处理 if(x>R){ xin=false;x=R } y=y+step*(yin?1:-1); if(y<T){ yin=true;y=T } if(y>B){ yin=false;y=B } setTimeout("floatAD()",delay) } </script> </head> <body onload="floatAD()">
</body> </html>
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)