Cet article partage principalement avec vous le code JS pour implémenter des publicités flottantes sur des sites Web. Vous pouvez d'abord jeter un œil aux rendus. J'espère que cela pourra vous aider.
Comme le montre l'image
Le bloc jaune se déplacera en haut, en bas, à gauche et à droite du navigateur et pourra être fermé lorsque le. la souris est déplacée vers le haut, elle s'arrêtera
<!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>Recommandations associées :
JS pour réaliser les effets spéciaux des fenêtres mobiles flottantes (publicités flottantes)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
