cari

Rumah >hujung hadapan web >tutorial js >JavaScript实现漂浮广告代码的实例总结

JavaScript实现漂浮广告代码的实例总结

黄舟
黄舟asal
2017-12-04 13:51:547988semak imbas

我们在打开网页的时候，我们会发现不管是什么网页都会有很多漂浮的广告，有很多人都会在想，这样的效果是怎么实现的呢？今天我们就带大家详细介绍下JavaScript实现漂浮广告代码的实例总结！

第一种 漂浮广告 不符合W3C
JavaScript漂浮广告代码，很不错，代码精简，不过一次只有漂一个，复制就能用了。希望站长朋友喜欢。

 
<html> 
<head> 
<title>漂浮广告</title> 
<body> 
<div id="codefans_net" style="position:absolute"> 
<!--链接地址--><a href="#" target="_blank"> 
<!--图片地址--><img src="/images/logo.gif" border="0"> 
</a> 
</div> 
<script> 
var x = 50,y = 60 
var xin = true, yin = true 
var step = 1 
var delay = 10 
var obj=document.getElementById("codefans_net") 
function float() { 
var L=T=0 
var R= document.body.clientWidth-obj.offsetWidth 
var B = document.body.clientHeight-obj.offsetHeight 
obj.style.left = x + document.body.scrollLeft 
obj.style.top = y + document.body.scrollTop 
x = x + step*(xin?1:-1) 
if (x < L) { xin = true; x = L} 
if (x > R){ xin = false; x = R} 
y = y + step*(yin?1:-1) 
if (y < T) { yin = true; y = T } 
if (y > B) { yin = false; y = B } 
} 
var itl= setInterval("float()", delay) 
obj.onmouseover=function(){clearInterval(itl)} 
obj.onmouseout=function(){itl=setInterval("float()", delay)} 
</script> 
</body> 
</html>

第二种 漂浮广告 不符合标准
Js漂浮广告代码，比较经典的浮动广告，到现还很实用，如果你是一位站长的话，这种代码是必备的，希望对你有用处。 

 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>漂浮广告</title> 
</head> 
<body> 
<DIV id=img1 style="Z-INDEX: 100; LEFT: 2px; WIDTH: 59px; POSITION: absolute; TOP: 43px; HEIGHT: 61px; 
visibility: visible;"><a href="http://sc.jb51.net" target="_blank"><img src="/images/logo.gif" width="80" height="80" border="0"></a></DIV> 
<SCRIPT> 
var xPos = 300; 
var yPos = 200; 
var step = 1; 
var delay = 30; 
var height = 0; 
var Hoffset = 0; 
var Woffset = 0; 
var yon = 0; 
var xon = 0; 
var pause = true; 
var interval; 
img1.style.top = yPos; 
function changePos() 
{ 
width = document.body.clientWidth; 
height = document.body.clientHeight; 
Hoffset = img1.offsetHeight; 
Woffset = img1.offsetWidth; 
img1.style.left = xPos + document.body.scrollLeft; 
img1.style.top = yPos + document.body.scrollTop; 
if (yon) 
{yPos = yPos + step;} 
else 
{yPos = yPos - step;} 
if (yPos < 0) 
{yon = 1;yPos = 0;} 
if (yPos >= (height - Hoffset)) 
{yon = 0;yPos = (height - Hoffset);} 
if (xon) 
{xPos = xPos + step;} 
else 
{xPos = xPos - step;} 
if (xPos < 0) 
{xon = 1;xPos = 0;} 
if (xPos >= (width - Woffset)) 
{xon = 0;xPos = (width - Woffset); } 
} 

function start() 
{ 
img1.visibility = "visible"; 
interval = setInterval(&#39;changePos()&#39;, delay); 
} 
function pause_resume() 
{ 
if(pause) 
{ 
clearInterval(interval); 
pause = false;} 
else 
{ 
interval = setInterval(&#39;changePos()&#39;,delay); 
pause = true; 
} 
} 
start(); 
</SCRIPT> 
</body> 
</html>

上面两个都是不支持标准声明的 
第三种 符合W3C的漂浮广告代码 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>符合W3C的漂浮广告代码-脚本之家</title> 
</head> 
<body> 
<script> 
document.write ("<DIV id=img1 style=&#39;Z-INDEX: 100; LEFT: 2px; WIDTH: 252px; POSITION: absolute; TOP: 43px; HEIGHT: 172px; ") 
document.write (" visibility: visible;&#39;> ") 
document.write (" <a href=&#39;http://s.jb51.net&#39; target=&#39;_blank&#39;> ") 
document.write (" <img src=&#39;/upload/201204/20120411210123566.gif&#39;style=border:none;/> ") 
document.write (" </a></DIV> ") 
var xPos = 300; 
var yPos = 200; 
var step = 1; 
var delay = 8; 
var height = 0; 
var Hoffset = 0; 
var Woffset = 0; 
var yon = 0; 
var xon = 0; 
var pause = true; 
var interval; 
img1.style.top = yPos; 
function changePos() 
{ 
width = document.documentElement.clientWidth; 
height = document.documentElement.clientHeight; 
Hoffset = img1.offsetHeight; 
Woffset = img1.offsetWidth; 
img1.style.left = xPos + document.documentElement.scrollLeft; 
img1.style.top = yPos + document.documentElement.scrollTop; 
if (yon) 
{yPos = yPos + step;} 
else 
{yPos = yPos - step;} 
if (yPos < 0) 
{yon = 1;yPos = 0;} 
if (yPos >= (height - Hoffset)) 
{yon = 0;yPos = (height - Hoffset);} 
if (xon) 
{xPos = xPos + step;} 
else 
{xPos = xPos - step;} 
if (xPos < 0) 
{xon = 1;xPos = 0;} 
if (xPos >= (width - Woffset)) 
{xon = 0;xPos = (width - Woffset); } 
} 
function start() 
{ 
img1.visibility = "visible"; 
interval = setInterval(&#39;changePos()&#39;, delay); 
} 
function pause_resume() 
{ 
if(pause) 
{ 
clearInterval(interval); 
pause = false;} 
else 
{ 
interval = setInterval(&#39;changePos()&#39;,delay); 
pause = true; 
} 
} 
start(); 
</script> 
</body> 
</html>

总结：

本文介绍了JavaScript实现漂浮广告的几种方法，每个方法使用都不一样，小伙伴们可以根据自己的需求在选择适合自己的，希望对你的工作有所帮助！

相关推荐：

js 居中漂浮广告

js 对联广告、漂浮广告封装类

JS随机漂浮广告代码具体实例

Atas ialah kandungan terperinci JavaScript实现漂浮广告代码的实例总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript定义及输出螺旋矩阵的方法详解_javascript技巧Artikel seterusnya：如何让你的JS代码更好看易读_基础知识

Artikel berkaitan

Lihat lagi