ホームページ > 記事 > ウェブフロントエンド > JavaScript でのフローティング広告コードの実装例のまとめ
Web ページを開くと、どの Web ページであっても、多くのフローティング広告が表示されます。この効果はどのようにして実現されるのでしょうか?今日は、JavaScriptを使用したフローティング広告コードの実装について詳しく紹介します。
最初のタイプのフローティング広告は、W3CJavaScript フローティング広告コードに準拠していません。これは非常に優れており、コードは合理化されていますが、一度に使用できるフローティング広告は 1 つだけです。ウェブマスターの友人が気に入ってくれるといいのですが。
<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>
2 番目のタイプのフローティング広告は基準を満たしていません
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('changePos()', delay); } function pause_resume() { if(pause) { clearInterval(interval); pause = false;} else { interval = setInterval('changePos()',delay); pause = true; } } start(); </SCRIPT> </body> </html>上記はどちらも標準宣言をサポートしていません
W3C に準拠する 3 番目のフローティング広告コード
<!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='Z-INDEX: 100; LEFT: 2px; WIDTH: 252px; POSITION: absolute; TOP: 43px; HEIGHT: 172px; ") document.write (" visibility: visible;'> ") document.write (" <a href='http://s.jb51.net' target='_blank'> ") document.write (" <img src='/upload/201204/20120411210123566.gif'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('changePos()', delay); } function pause_resume() { if(pause) { clearInterval(interval); pause = false;} else { interval = setInterval('changePos()',delay); pause = true; } } start(); </script> </body> </html>
概要:
この記事では、JavaScript でフローティング広告を実装するいくつかの方法を紹介します。友人は自分のニーズに応じて自分に合ったものを選択できます。あなたの仕事に役立つことを願っています。関連する推奨事項:
以上がJavaScript でのフローティング広告コードの実装例のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。