Js浮动广告效果实现

第一种漂浮广告不符合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>

View Code

第二种漂浮广告不符合标准
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>

View Code

第四种常用网页漂浮广告代码

<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>

View Code

第五种亲自实践过，可以实现从左上角自动移动到右下角

说明：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>

调用方法