이 기사에서는 주로 웹 사이트 플로팅 광고를 구현하는 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>관련 추천 :
JS는 플로팅 모바일 윈도우 구현(플로팅 광고) 특수 효과
위 내용은 웹사이트 플로팅 광고를 구현하는 JS 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
