JavaScript浮动广告代码实例
很多网站的页面都有漂浮的广告效果,虽然烦人,但也确实起到了良好的宣传效果。
各大代码网站也有关于漂浮代码的实例,很多存在着兼容性问题,不符合W3C标准,本站修复了兼容性问题,下面就简单介绍一下如何实现此效果。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <head> <title>漂浮代码-前端教程网</title> <script type="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> <div id="ad" style="position:absolute"> <a href="#" target="_blank"> <img src="mytest/JS/ad.jpg" border="0"> </a> </div> </body> </html>
图片可以在文档中随机的漂浮,下面就简单介绍一下如何实现此效果。
一.实现原理:
将div块采用绝对定位,里面包裹着图片,实际上是这个div块进行漂浮。然后通过定时器函数不断调用float来实现div的漂浮效果,此函数能够判断div块是否碰触边缘,然后再进行位置调整。
二.代码注释:
(1).window.onload=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.onmouseover=function(){clearInterval(flag)} ,当鼠标放在div上,停止漂浮。
(18).obj.onmouseout=function(){flag=setInterval(float, delay)},当鼠标离开,继续漂浮。
JavaScript浮动广告代码实例,这样的场景在实际项目中还是用的比较多的,关于JavaScript浮动广告代码实例就介绍到这了。
JavaScript浮动广告代码实例属于前端实例代码,有关更多实例代码大家可以查看。