How to create a floating ad using JavaScript to create a floating ad code

Home

Web Front-end

JS Tutorial

How to create a floating ad using JavaScript to create a floating ad code_javascript skills

May 16, 2016 pm 05:44 PM

float floating ads

If you have a certain foundation in JavaScript, it is relatively easy to create floating ads. Just upload the code:

Copy the code The code is as follows:

 
<!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>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> 
</head> 
<body> 
<div id="cl" onclick="closeAd()"> 
<img src="images/close.jpg" /> 
</ div> 
<div id="csdn"> 
<a href="http://www.csdn.net"><img src="images/xiaojie1.jpg" border= "0" /></a> 
</div> 
<div id="ad"> 
<a href="http://www.taobao.com "><img src="images/advpic.gif" /></a> 
</div> 
</body> 
</html> 
 

Key points:
Document.documentElement must be used in the above code, do not use the old document.body, otherwise, it will not comply with w3c standards and you will not see the floating effect!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn