本文主要和大家分享JS实现网站悬浮广告的代码，大家可以先看一下效果图，希望能帮助到大家。
如图
黄色区块会沿着浏览器的上下左右碰撞移动,可关闭,鼠标移上去会停止
<!doctype html>
<html>
<he>
<meta charset="utf-8">
<title>广告</title>
<style type="text/css">
*{
pding:0px;
margin:0px;
}
#ad{
position:absolute;
left:0px;
top:0px;
width:200px;
height:50px;
line-height:50px;
text-align:center;
color:black;
background-color:orange;
border-rius: 2%;
}
</style>
</he>
<body>
<p id="ad">广告位招商</p>
</body>
<script type="text/javascript">
//获取img
ad=document.getElementById("ad");
//初始化横坐标
x=0;
//设置纵坐标
y=0;
//设置加速度
yv=10;
xv=10;
function fun(){
//范围
//左右
if(x<0||x>window.innerWidth-ad.offsetWidth){
xv=-xv;
}
//上下
if(y<0||y>window.innerHeight-ad.offsetHeight){
yv=-yv;
}
x+=xv;
y+=yv;
//获取到的x值赋值给ad的left
ad.style.left=x+"px";
//获取到的y值赋值给ad的top
ad.style.top=y+"px";
}
mytime=setInterval(fun,100);
//给ad绑定鼠标移入事件
ad.onmouseover=function(){
//清除定时器
clearInterval(mytime);
}
//鼠标移出
ad.onmouseout=function(){
mytime=setInterval(fun,100);
}
</script>
</html>相关推荐：
Atas ialah kandungan terperinci JS实现网站悬浮广告的代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
