第一种 漂浮广告 不符合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漂浮广告代码，比较经典的浮动广告，到现还很实用，如果你是一位站长的话，这种代码是必备的，希望对你有用处。
1 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>漂浮广告</title> 6 </head> 7 <body> 8 <DIV id=img1 style="Z-INDEX: 100; LEFT: 2px; WIDTH: 59px; POSITION: absolute; TOP: 43px; HEIGHT: 61px; 9 visibility: visible;"><a href="http://sc.jb51.net" target="_blank"><img src="/images/logo.gif" width="80" height="80" border="0"></a></DIV> 10 <SCRIPT> 11 var xPos = 300; 12 var yPos = 200; 13 var step = 1; 14 var delay = 30; 15 var height = 0; 16 var Hoffset = 0; 17 var Woffset = 0; 18 var yon = 0; 19 var xon = 0; 20 var pause = true; 21 var interval; 22 img1.style.top = yPos; 23 function changePos() 24 { 25 width = document.body.clientWidth; 26 height = document.body.clientHeight; 27 Hoffset = img1.offsetHeight; 28 Woffset = img1.offsetWidth; 29 img1.style.left = xPos + document.body.scrollLeft; 30 img1.style.top = yPos + document.body.scrollTop; 31 if (yon) 32 {yPos = yPos + step;} 33 else 34 {yPos = yPos - step;} 35 if (yPos < 0) 36 {yon = 1;yPos = 0;} 37 if (yPos >= (height - Hoffset)) 38 {yon = 0;yPos = (height - Hoffset);} 39 if (xon) 40 {xPos = xPos + step;} 41 else 42 {xPos = xPos - step;} 43 if (xPos < 0) 44 {xon = 1;xPos = 0;} 45 if (xPos >= (width - Woffset)) 46 {xon = 0;xPos = (width - Woffset); } 47 } 48 49 function start() 50 { 51 img1.visibility = "visible"; 52 interval = setInterval('changePos()', delay); 53 } 54 function pause_resume() 55 { 56 if(pause) 57 { 58 clearInterval(interval); 59 pause = false;} 60 else 61 { 62 interval = setInterval('changePos()',delay); 63 pause = true; 64 } 65 } 66 start(); 67 </SCRIPT> 68 </body> 69 </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='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>
第四种 常用网页漂浮广告代码 亲自测试 有大用
<body bgcolor="#F7F7F7"> <!--图片漂浮广告代码开始--> <div id="www_qpsh_com" style="position:absolute"> <!--链接地址--><a href="http://www.dabaoku.com" _fcksavedurl="/" target="_blank"> <!--图片地址--><img src="http://www.dabaoku.com/images/logo.gif" _fcksavedurl="http://www.dabaoku.com/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("www_qpsh_com") function floatwww_qpsh_com() { var L=T=0 //by www.qpsh.com 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("floatwww_qpsh_com()", delay) obj.onmouseover=function(){clearInterval(itl)} obj.onmouseout=function(){itl=setInterval("floatwww_qpsh_com()", delay)} </script> <!--图片漂浮广告代码结束--> </body>
第五种 亲自实践过，可以实现从左上角自动移动到右下角 亲自测试 有大用
说明：jquery在1.9开始不支持.live()方法的写法而改用.on()，见http://jquery.com/upgrade-guide/1.9/#live-removed.该插件中关闭图片链接使用了.live().请根据自己情况自行修改.
(function ($) { $.fn.floatAd = function (options) { var defaults = { imgSrc: "/web/Images/logo.gif", //漂浮图片路径 url: "http://www.baidu.com", //图片点击跳转页 openStyle: 1, //跳转页打开方式 1为新页面打开 0为当前页打开 speed: 10 //漂浮速度 单位毫秒 }; var options = $.extend(defaults, options); var _target = options.openStyle == 1 ? "target='_blank'" : ''; var html = "<div id='float_ad' style='position:absolute;left:0px;top:0px;z-index:1000000;cleat:both;'>"; html += " <a href='" + options.url + "' " + _target + "><img src='" + options.imgSrc + "' border='0' class='float_ad_img'/></a> <a href='javascript:;' id='close_float_ad' style=''>x</a>"; html += "</div>"; $('body').append(html); function init() { var x = 0, y = 0 var xin = true, yin = true var step = 1 var delay = 10 var obj = $("#float_ad") obj.find('img.float_ad_img').load(function () { var float = function () { var L = T = 0; var OW = obj.width(); //当前广告的宽 var OH = obj.height(); //高 var DW = $(document).width(); //浏览器窗口的宽 var DH = $(document).height(); x = x + step * (xin ? 1 : -1); if (x < L) { xin = true; x = L } if (x > DW - OW - 1) {//-1为了ie xin = false; x = DW - OW - 1 } y = y + step * (yin ? 1 : -1); if (y > DH - OH - 1) { yin = false; y = DH - OH - 1; } if (y < T) { yin = true; y = T } var left = x; var top = y; obj.css({ 'top': top, 'left': left }); } var itl = setInterval(float, options.speed); $('#float_ad').mouseover(function () { clearInterval(itl) }); $('#float_ad').mouseout(function () { itl = setInterval(float, options.speed) }) }); // 点击关闭 $('#close_float_ad').live('click', function () { $('#float_ad').hide(); }); } init(); }; //floatAd })(jQuery);
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script type="text/jscript" src="JS/FloatAdd.js"></script> <script type="text/javascript"> $(function () { //调用漂浮插件 $("body").floatAd({ imgSrc: "/web/Images/logo.gif", url: 'http://www.baidu.com' }); }) </script>