导读跟大家讲解下有关JS实现网站悬浮广告的代码，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说JS实现网站悬浮广告的代码，小编
跟大家讲解下有关JS实现网站悬浮广告的代码，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说JS实现网站悬浮广告的代码，小编也收集到了有关JS实现网站悬浮广告的代码的相关资料，希望大家看到了会喜欢。
本文主要和大家分享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">//获取imgad=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的leftad.style.left=x+"px";//获取到的y值赋值给ad的topad.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中文网其它相关文章！
来源：php中文网
免责声明：本文由用户上传，如有侵权请联系删除！