It's easy to make floating ads if you have a certain JavaScript base. Directly on the code:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<style type= "Text/css" >
*{
margin:0;
padding:0;
}
#csdn
{
width:800px;
margin:0 Auto;
}
#ad
{
Position:absolute;
right:0px;
top:30px;
Z-index:1;
}
#cl
{
Position:absolute;
right:0px;
top:30px;
Z-index:2;
}
</style>
<script type= "Text/javascript" >
var advinittop=30;
var closeinittop=30;
function Inix ()
{
Advinittop=document.getelementbyid ("ad"). Style.pixeltop;
Closeinittop=document.getelementbyid ("CL"). Style.pixeltop;
}
function Closead ()
{
document.getElementById ("ad"). style.display= "None";
document.getElementById ("CL"). style.display= "None";
}
function Move ()
{
document.getElementById ("ad"). Style.pixeltop=document.body.scrolltop+advinittop;
document.getElementById ("CL"). Style.pixeltop=document.body.scrolltop+closeinittop;
document.getElementById ("ad"). Style.pixeltop=document.documentelement.scrolltop+advinittop;
document.getElementById ("CL"). Style.pixeltop=document.documentelement.scrolltop+closeinittop;
Alert (document.getElementById ("ad"). Style.pixeltop);
window.status=document.documentelement.scrolltop+ "/" +document.getelementbyid ("ad"). Style.pixeltop;
}
Window.onscroll=move;
</script>
<body>
<div id= "cl" onclick= "Closead ()" >
</div>
<div id= "CSDN" >
<a href= "http://www.csdn.net" ></a>
</div>
<div id= "AD" >
<a href= "http://www.taobao.com" ></a>
</div>
</body>
Main points:
The above code to use Document.documentelement, do not use the old document.body, otherwise, do not meet the standards of the consortium, see the Floating effect!