第一种 漂浮广告 不符合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('changePos()', delay);

 }

 function pause_resume()

 {

 if(pause)

 {

 clearInterval(interval);

 pause = false;}

 else

 {

 interval = setInterval('changePos()',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='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>

调用方法

Js浮动广告效果实现的更多相关文章

  1. JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码

    基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...

  2. 笨办法用js屏蔽被http劫持的浮动广告

    最近发现网站经常在右下角弹出一个浮动广告,开始的时候以为只是浏览器的广告. 后来越来越多同事反映在家里不同浏览器也会出现广告.然后深入检查了下,发现网站竟然被劫持了. 然后百度了一大堆资料,什么htt ...

  3. JQuery实现广告效果（滚动切换）

    JQuery实现广告效果(滚动切换)   Html+css 效果如上图 代码: <!DOCTYPE html> <html> <head lang="en&qu ...

  4. web页面浮动回到顶部功能和浮动广告

    实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...

  5. JQuery实现两侧浮动广告

    1.描述 两侧浮动显示广告 2.要点 其实就是一直在变浮动广告距顶部的值. 3.代码 <!DOCTYPE html> <html> <head> <meta ...

  6. 首页大屏广告效果 jquery轮播图淡入淡出

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  8. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  9. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. c#优秀文章

    文件传输示例]C# WinForm WebSocket (非浏览器):http://bbs.cskin.net/thread-4431-1-1.html NanUI for Winform发布,让Wi ...

  2. jQuery 遍历 - closest() 方法

    jQuery 遍历参考手册 实例 本例演示如何通过 closest() 完成事件委托.当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景: $( document ).bind("c ...

  3. Java过滤器详细文档，简介，实例，应用

    简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 ...

  4. P1613 跑路

    Luogu1613 #include<bits/stdc++.h> using namespace std; const int N=65; bool G[N][N][N]; int di ...

  5. Largest Submatrix of All 1’s(思维+单调栈）

    Given a m-by-n (0,1)-matrix, of all its submatrices of all 1's which is the largest? By largest we m ...

  6. Codeforces 1136D Nastya Is Buying Lunch (贪心）

    题意: 给一个序列和一组交换序列(a,b),当且仅当a在b的前面(不允许有间隔),这两个数才能交换,问最后一个数最多能移动多少个位置. 分析: 这题是思路是十分的巧妙呀 , 用一个数组num[x]  ...

  7. PHP中Session ID的实现原理

    前序: 首先要明白PHPSESSID看似多次刷新都不会改变其实是没有删除本地相关联的cookie,删除的方法 session_destroy();//删除服务器端的session文件 setcooki ...

  8. 关于Ehcache缓存中timeToLiveSeconds和timeToIdleSeconds

    [From] http://blog.csdn.net/vtopqx/article/details/8522333 闲来无事测试了下Ehcache与MemCache比较,在此发现了Ehcache中一 ...

  9. 【网络】默认路由、RIPv2、OSPF、EIGRP配置（全网全通）

    1:默认路由 遇到问题:给r2配置向右的单项默认路由,通过PC1去ping主机PC2,一直显示Request timed out, 解决方法:r2配置如下: r2(config)#ip route 0 ...

  10. 集成 Jenkins 和 TestNG 实现自助式自动化测试平台

    背景介绍 在软件业十分成熟的今天,敏捷(Agile)开发在业界日益流行,而面临的挑战也日益增多,不断变化的用户需求.缩短的开发周期.频繁的部署上线.复杂的产品架构和团队组织,如何继续保证软件的质量是一 ...