网页JS浮动广告的分享[智睿软件

智睿软件_技术交流论坛 → 综合站长 → Web页面设计 → 网页JS浮动广告的分享

共有16541人关注过本帖树形打印主题：网页JS浮动广告的分享

zhirui

小大 1楼 个性首页 | 信息 | 搜索 | 邮箱 | 主页 | UC

加好友

发短信

等级：管理员帖子：520 积分：8740 威望：0 精华：5 注册：2009-07-07

网页JS浮动广告的分享 发帖心情

Post By：2014-10-14 15:57:58

几种浮动广告的制作

例子：制作浮动的广告图片
<head>

<title>制作浮动的广告图片</title>

var advInitTop=0;//使层总置于顶端的初始值

function move()

{

window.document.getElementById("advLayer").style.top=advInitTop+window.document.body.scrollTop;

}

window.onscroll=move;//窗口的滚动事件,当页面滚动时调用move()函数

</script>

</head>

<body >

</div>

</body>

例子:带关闭按钮的浮动的广告图片
<head>

<title>制作浮动的广告图片</title>

//使层总置于顶端的初始值

var advInitTop=0;

var closeInitTop=0;

//获取广告图片所在的层上边距的初始值

function inix()

{

advInitTop=parseInt(window.document.getElementById("advLayer").style.top);

closeInitTop=parseInt(window.document.getElementById("closeLayer").style.top);

}

//使用广告图片所在的层与滚动条同步移动

function move()

{

document.getElementById("advLayer").style.top=advInitTop+parseInt(window.document.body.scrollTop);

document.getElementById("closeLayer").style.top=closeInitTop+parseInt(window.document.body.scrollTop);

}

//隐藏advLaayer closeLayer 并不为被隐藏的对象保留其物理空间

function closeMe()

{

window.document.getElementById("closeLayer").style.display="none";

window.document.getElementById("advLayer").style.display="none";

}

//窗口的滚动事件,当页面滚动时调用move()函数

window.onscroll=move;

</script>

</head>

</div>

</div>

下载信息 [文件大小：下载次数： ]
点击浏览该文件:jsad-code-float-248.zip

[此贴子已经被作者于2015-03-27 15:32:38编辑过]

企业开源网站管理系统,中小型企业的成长伙伴支持(0) 中立(0) 反对(0)

zhirui

小大 2楼 个性首页 | 信息 | 搜索 | 邮箱 | 主页 | UC

加好友

发短信

等级：管理员帖子：520 积分：8740 威望：0 精华：5 注册：2009-07-07

Post By：2014-10-14 15:58:04

例子: 动态显示图片

<head>

<title>动态显示图片</title>

var arr=new Array();

arr[0]="images/arrow.gif";

arr[1]="images/back.jpg";

arr[2]="images/bt.jpg";

var i=0;

function showPic()

{

if(i>2)

{

i=0;

}

window.document.getElementById("pic").src=arr[i++];

window.setTimeout("showPic()",1000);

}

</script>

</head>

</div>

</body>

例子: 飘浮广告
<head>

//漂浮广告的初始位置

var x=50,y=60;

//xin为真,则向右运动,否则向左运动.

//yin为真,则向右运动,否则向左运协.

var xin=true,yin=true;

//移动的距离

var step=1;

//移动的步长

var delay=10;

function floatAD()

{

//L左边界,T右边界

var L=T=0;

//层移动的右边界

var R=window.document.body.offsetWidth-window.document.getElementById("fly").offsetWidth;

//层移动的下边界

var B=window.document.body.offsetHeight-window.document.getElementById("fly").offsetHeight;

//层移动后的左边界

window.document.getElementById("fly").style.left=x;

//层移动后的上边界

window.document.getElementById("fly").style.top=y;

//判断水平方向

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;}

//隔多少时间调用一次

setTimeout("floatAD()",delay);

}

</script>

</head>

</div>

</body>

</html>

企业开源网站管理系统,中小型企业的成长伙伴支持(0) 中立(0) 反对(0)

zhirui

小大 3楼 个性首页 | 信息 | 搜索 | 邮箱 | 主页 | UC

加好友

发短信

等级：管理员帖子：520 积分：8740 威望：0 精华：5 注册：2009-07-07

Post By：2014-10-14 16:07:09

<html>
<head>
<title>漂浮广告</title>
<body>
<div id="codefans_net" style="position:absolute">
<a href="#" target="_blank">
<img src="/images/logo.gif" border="0">
</a>
</div>
<script>
var x = 50,y = 60
var xin = true, yin = true
var step = 1
var delay = 10
var obj=document.getElementById("codefans_net")
function float() {
var L=T=0
var R= document.body.clientWidth-obj.offsetWidth
var B = document.body.clientHeight-obj.offsetHeight
obj.style.left = x + document.body.scrollLeft
obj.style.top = y + document.body.scrollTop
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 itl= setInterval("float()", delay)
obj.onmouseover=function(){clearInterval(itl)}
obj.onmouseout=function(){itl=setInterval("float()", delay)}
</script>
</body>
</html>

支持(0) 中立(0) 反对(0)

下一主题 >> << 上一主题

主题：网页JS浮动广告的分享