◆◆0

javascript实现两侧横幅广告特效代码

重蔚 2018年4月3日 JavaScript自学教程 2,681 views

文章目录[隐藏]

知识点

知识点

页面加载事件

body的onload事件，是页面加载事件，页面打开，或每次刷新时调用，而且只会这时候执行一次。

窗口的事件调用函数必须

Window.onscroll=函数名;

字符串类型转换成数值： parseFloat(变量);
超链接调用JS函数：

<a href="javascript:CloseGuanggao();"> 关闭 </a>

或者

<a href="javascript:void(null);" onclick="CloseGuanggao()"> 关闭 </a>

<!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="//www.cwhello.com/wp-content/uploads/2018/04/bg.jpg" height="1000px" />
<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="//www.cwhello.com/wp-content/uploads/2018/04/guanggao.jpg" /></a>
<div style="z-index:2; position:absolute; left: 77px; top: 9px;"><a href="javascript:void(null);" onclick="CloseGuanggao()"> 关 闭 </a></div>
</div>
<div id="divguanggao" name="divguanggao" style="z-index:1; position:absolute; top:8px; left:1143px;">
<img src="//www.cwhello.com/wp-content/uploads/2018/04/guanggao.jpg" />
</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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>重蔚自留地两侧广告代码</title>

</head>

</div>

</div>

</body>

//初始化，获取广告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>

以上就是javascript实现两侧横幅广告特效代码。

欢迎分享本文，转载请保留出处！—重蔚自留地站长邮箱：951076433@qq.com

知识点

相关文章