Heim > Artikel > Web-Frontend > JS-Code zur Implementierung von Website-Floating-Werbung
JS-Code zur Implementierung von Website-Floating-Werbung
- 小云云Original
- 2018-03-30 14:04:413828Durchsuche
Dieser Artikel teilt Ihnen hauptsächlich den JS-Code zur Implementierung von Website-Floating-Werbung mit. Ich hoffe, er kann Ihnen helfen.
Wie im Bild gezeigt
Der gelbe Block bewegt sich entlang der oberen, unteren, linken und rechten Seite des Browsers und kann geschlossen werden Wenn die Maus nach oben bewegt wird, stoppt sie
<!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>Verwandte Empfehlungen:
JS zur Realisierung der Spezialeffekte schwebender mobiler Fenster (schwebende Werbung)
Das obige ist der detaillierte Inhalt vonJS-Code zur Implementierung von Website-Floating-Werbung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!