本文主要和大家分享JS实现网站悬浮广告的代码,大家可以先看一下效果图,希望能帮助到大家。
如图
黄色区块会沿着浏览器的上下左右碰撞移动,可关闭,鼠标移上去会停止
nbsp;html>广告 *{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%;}广告位招商
//获取imgad=document.getElementById("ad");//初始化横坐标x=0;//设置纵坐标y=0;//设置加速度yv=10;xv=10;function fun(){//范围//左右if(xwindow.innerWidth-ad.offsetWidth){xv=-xv;}//上下if(ywindow.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);}
登录后复制
相关推荐:
JS实现悬浮移动窗口(悬浮广告)的特效
以上就是JS实现网站悬浮广告的代码的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2777616.html