<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>带关闭按钮的滚动广告</title>
<style type="text/css">
#main {
text-align: center;
}
#float {
position: absolute;
left: 30px;
top: 60px;
z-index: 1;
}
#ss{
position: absolute;
left: 30px;
top: 60px;
z-index: 1;
}
#close {
position: absolute;
top: 60px;
left: 134px;
z-index: 2;
cursor: hand;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
//这里是关闭浮动图片的函数（根据要求是要将图片关闭，但我想到的就是一下这两种方法，就想问问有没有类似close,这样的方法？，谢谢）
function adv_close(){
var close=document.getElementById("ss");
//close.parentNode.remove(close);//这里用删除的方法将图片关闭了
close.style.visibility="hidden";//这里上将图片好像类似隐藏了
}
var advertop;//层距页面的顶端距离
var adverleft;//层距页面的左边距离
var adverobj;//
function inxi(){
adverobj=document.getElementById("ss");
if(adverobj.currentStyle){
advertop=parseInt(adverobj.currentStyle.top);
adverleft=parseInt(adverobj.currentStyle.left);
}
else{
advertop=parseInt(document.defaultView.getComputedStyle(adverobj,null).top);
adverleft=parseInt(document.defaultView.getComputedStyle(adverobj,null).left);
}
}
function move(){
var stop=parseInt(document.documentElement.scrollTop||document.body.scrollTop);
var sleft=parseInt(document.documentElement.scrollLeft||document.body.scrollLeft);
adverobj.style.top=advertop+stop+"px";
adverobj.style.left=adverleft+sleft+"px";
}
window.onload=inxi;
window.onscroll=move;
</script>
</head>
<body>
<div id="ss">
<div id="close" onClick="adv_close()"><img src="images/close.jpg"></div>
<div id="float"><img src="images/advpic.jpg"></div></div>
<div id="main"><img src="images/contentpic.jpg"></div>
</body>
</html>
相关分类