집 > 기사 > 웹 프론트엔드 > JavaScript로 플로팅 광고 코드를 구현한 예 요약

JavaScript로 플로팅 광고 코드를 구현한 예 요약

黄舟원래의: 2017-12-04 13:51:547871검색

웹페이지를 열면 어떤 웹페이지든 떠다니는 광고가 많다는 것을 알게 될 것입니다. 이 효과는 어떻게 얻을 수 있을까? 오늘은 자바스크립트를 이용한 플로팅 광고 코드 구현에 대해 자세히 소개해드리겠습니다!

첫 번째 유형의 플로팅 광고는 W3CJavaScript 플로팅 광고 코드를 준수하지 않습니다. 이는 매우 훌륭하고 코드가 간소화되었지만 한 번에 하나의 플로팅 광고만 사용할 수 있습니다. 내 웹마스터 친구들이 좋아했으면 좋겠습니다.

 
<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로 플로팅 광고를 구현하는 여러 가지 방법을 소개합니다. 친구들은 자신의 필요에 따라 자신에게 맞는 것을 선택할 수 있습니다. 작업에 도움이 되기를 바랍니다!

JavaScript로 플로팅 광고 코드를 구현한 예 요약

관련 기사