原生js漂浮广告效果
静态页面代码
<body><div id="box"><img src="1.jpg" alt=""></div></body>
css样式
*{padding: 0;margin: 0;}#box{width: 200px;height: 200px;border: solid 1px black;position: absolute;top: 0;left: 0;background: url("../../img/0912160251944.jpg")no-repeat;}img{width: 20px;height: 20px;float: right;}
这些样式只供参考，可根据个人喜好更改
js代码区域
//获取元素var box = document.getElementById('box');var close = document.getElementsByTagName("img")[0];//允许的left最大值var maxleft = document.documentElement.clientWidth-box.offsetWidth;//允许的top最大值var maxtop= document.documentElement.clientHeight-box.offsetHeight;//设置一下响应式 当屏幕变化的时候获取新值window.onresize=function () {maxleft = document.documentElement.clientWidth-box.offsetWidth;maxtop= document.documentElement.clientHeight-box.offsetHeight;}//距上距离每次变化的值 单位pxvar t=4;//距左距离每次变化的值 单位pxvar l=4;//漂浮函数function piaofu() {//获取初始距左的距离var oldleft=box.offsetLeft;//设置新距左的距离var newleft =oldleft+l;//获取初始距上的距离var oldtop=box.offsetTop;//设置新距上的距离var newtop =oldtop+t;//如果距上的距离超过高度最大值，重新赋值为高度最大值if(newtop>maxtop){newtop=maxtop;}//如果距左的距离超过距左的最大值，重新赋值为距左最大值if(newleft>maxleft){newleft=maxleft;}//如果距上的距离小于高度最小值，重新赋值为高度最小值if(newtop<0){newtop=0}//如果距左的距离小于距左的最小值，重新赋值为距左最小值if(newleft<0){newleft=0}box.style.left=newleft+"px";box.style.top=newtop+"px";//进行判断if(newtop==maxtop ||newtop==0){t=-1*t;}if(newleft==maxleft ||newleft==0){l=-1*l;}// if(box.style.display=="none"){//setTimeout(function () {// box.style.display="block"//},3000)// }}//设置定时器var timer= setInterval(piaofu,20)//当鼠标放上的时候清楚定时器box.onmouseover=function () {clearInterval(timer)}//当鼠标移走的时候定时器继续box.onmouseout=function () {timer= setInterval(piaofu,20)}//当点击关闭按钮时隐藏close.onclick=function () {box.style.display='none'}
以上这些是我个人的想法，欢迎大家进行讨论、提出意见或建议，共同进步，感谢大家的浏览！
