Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
很多网站的页面都有漂浮的广告效果，虽然烦人，但也确实起到了良好的宣传效果。
各大代码网站也有关于漂浮代码的实例，很多存在着兼容性问题，不符合W3C标准，本站修复了兼容性问题，下面就简单介绍一下如何实现此效果。
代码如下:
[HTML] 纯文本查看 复制代码 运行代码
<!DOCTYPE html><html><head><metacharset=" utf-8"><head><title>浮动广告</title><scripttype="text/javascript">window.onload=function(){var x=50,y=60;var xin=true, yin=true;var step=1;var delay=10;var obj=document.getElementById("ad");function float(){var L=T=0;var R=document.documentElement.clientWidth-obj.offsetWidth;var B =document.documentElement.clientHeight-obj.offsetHeight;obj.style.left=(x+document.body.scrollLeft||document.documentElement.scrollLeft)+"px";obj.style.top=(y+document.body.scrollTop||document.documentElement.scrollTop)+"px";x = x + step*(xin?1:-1);if(x < L){ xin = true; x = L}if(x > R){ xin = false; x = R}y=y + step*(yin?1:-1)if(y < T){ yin = true; y = T }if(y > B){ yin = false; y = B }}var flag= setInterval(float, delay)obj.onmouseover=function(){clearInterval(flag)}obj.onmouseout=function(){flag=setInterval(float, delay)}}</script><body><divid="ad"style="position:absolute"><ahref="#"target="_blank"><imgsrc="mytest/JS/ad.jpg"border="0"></a></div></body></html>
图片可以在文档中随机的漂浮，下面就简单介绍一下如何实现此效果。
一.实现原理:
将div块采用绝对定位，里面包裹着图片，实际上是这个div块进行漂浮。然后通过定时器函数不断调用float来实现div的漂浮效果，此函数能够判断div块是否碰触边缘，然后再进行位置调整。
二.代码注释:
（1）.window.οnlοad=function(){}，当文档完全加载完成再去执行函数中的代码。
（2）.var x=50,y=60，声明两个变量x和y用来存放漂浮div的初始坐标。
（3）. var xin=true, yin=true，设置两个标志。
（4）.var step=1，设置div漂浮的幅度。
（5）.var delay=10，用来设置定时器函数执行的时间间隔。
（6）.var obj=document.getElementById(“ad”)，获取id属性值为ad的对象。
（7）.function float(){}，此函数规定了div块的漂浮原则。
（8）.var L=T=0，声明两个变量并赋值为零，用来判断div块是否已经到达网页的左边缘和下边缘。
（9）.ar R=document.documentElement.clientWidth-obj.offsetWidth，可见宽度减去div块的宽度，也就是剩余空间的宽度。
（10）.var B=document.documentElement.clientHeight-obj.offsetHeight，可见高度减去div块的高度，也就是剩余空间的高度。
（11）.obj.style.left=(x+document.body.scrollLeft||document.documentElement.scrollLeft)+”px”，用来规定div的left属性值，之所以使用scrollleft是因为有可能网页的宽度过宽出现横向滚动条，之所以使用||是为了消除浏览器兼容性问题。
（12）.obj.style.top=(y+document.body.scrollTop||document.documentElement.scrollTop)+”px”，这个和上面同理，不过方位不一样。
（13）.x=x+step*(xin?1:-1)，计算x的值。
（14）.if(x < L){ xin = true; x = L} ，如果div块到达网页的左边缘，如果是的话将xin的值设置为true，并且将x的值设置为L，即为零。
（15）.if(x > R){ xin = false; x = R} ，如果div块到达网页的右边缘，则将xin的值色织为false，并将x的值的设置为r。
（16）.var flag=setInterval(float,delay) ，使用定时器函数调用float()函数。
（17）.obj.οnmοuseοver=function(){clearInterval(flag)} ，当鼠标放在div上，停止漂浮。
（18）.obj.οnmοuseοut=function(){flag=setInterval(float, delay)}，当鼠标离开，继续漂浮。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/191320.html原文链接：https://javaforall.net
