【JS】两侧横幅小广告特效

来源：互联网发布：国密加密算法js 编辑：程序博客网时间：2024/04/30 01:52

选择一章图片作为背景：命名为：bg.jpg

再找一张图片作为广告的，让他跟随网页悬浮在窗口：命名为：guanggao.jpg

这里左右都放同样的图片做广告，大家也可以用不同的图片。

效果：

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两侧横幅小广告特效</title>
</head>

<body style="overflow-x:hidden;" onload="Init()">
<img src="bg.jpg" height="1000px" width="1400px" />

<div id="divguanggao" name="divguanggao" style="z-index:1; position:absolute; width:120px; height:400px; top:8px; left:3px; float:left;">
<a href="http://www.goodjobs.cn"><img src="guanggao.jpg" /></a>
<div style="z-index:2; position:absolute;top: 0px;"><a href="javascript:void(null);" onclick="CloseGuanggao()"> 关闭 </a></div>
</div>

<div style="position:absolute; top:10px; right:10px;" name="divguanggao" id="divguanggao">
<a href="http://www.xuewanwang.com" target="_blank" title="学玩网谁上谁知道！"><img src="guanggao.jpg" /></a>
<div style="z-index:2; position:absolute; top:0px;"><a href="javascript:void(null);" onclick="CloseGuanggao()"> 关闭 </a></div>
</body>
<script language="javascript" type="text/javascript">
//初始化，获取广告DIV的顶部
var y=0;
function Init(){
var divguanggao=document.getElementsByName("divguanggao")[0];
var pxp=divguanggao.style.top.indexOf("px");//lastIndexOf
y=divguanggao.style.top.substr(0,pxp);
y=parseFloat(y);//字符串类型和数值转换
}

//滚动广告跟随
function GuanggaoScroll(){
var st=document.body.scrollTop;//获取垂直方向滚动的距离
var divguanggaoes=document.getElementsByName("divguanggao");
for(var i=0;i<divguanggaoes.length;i++){
divguanggaoes[i].style.top=(y+st)+"px";
}
}

//关闭2个广告
function CloseGuanggao(){
var divguanggaoes=document.getElementsByName("divguanggao");
for(var i=0;i<divguanggaoes.length;i++){
divguanggaoes[i].style.display="none";
}
}

window.onscroll=GuanggaoScroll;//不能放小括号

</script>
</html>

0 0