很多网站的页面都有漂浮的广告效果,虽然烦人,但也确实起到了良好的宣传效果。
各大代码网站也有关于漂浮代码的实例,很多存在着兼容性问题,不符合W3C标准,本站修复了兼容性问题,下面就简单介绍一下如何实现此效果。
代码如下:
[HTML] 纯文本查看 复制代码 运行代码
010203040506070809101112131415161718192021222324252627282930313233343536373839<!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.ο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://bianchenghao.cn/6356.html