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>

第二种漂浮广告不符合标准
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浮动广告效果实现的更多相关文章

JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码
基于JavaScript代码实现随机漂浮图片广告,javascript图片广告在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...
笨办法用js屏蔽被http劫持的浮动广告
最近发现网站经常在右下角弹出一个浮动广告,开始的时候以为只是浏览器的广告. 后来越来越多同事反映在家里不同浏览器也会出现广告.然后深入检查了下,发现网站竟然被劫持了. 然后百度了一大堆资料,什么htt ...
JQuery实现广告效果（滚动切换）
JQuery实现广告效果(滚动切换) Html+css 效果如上图代码: <!DOCTYPE html> <html> <head lang="en&qu ...
web页面浮动回到顶部功能和浮动广告
实现测试浮动回到顶部法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...
JQuery实现两侧浮动广告
1.描述两侧浮动显示广告 2.要点其实就是一直在变浮动广告距顶部的值. 3.代码 <!DOCTYPE html> <html> <head> <meta ...
首页大屏广告效果 jquery轮播图淡入淡出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

Linux下指定线程的名字
为了能方便的区分一个进程中的每个线程,可以通过prctl()给每个线程取个名字.这样在会创建多个线程的程序执行过程中,就能知道一个pid或tid对应的是哪个线程,对调试程序有一定帮助. prctl是个 ...
011 Android TabLayout+ViewPager实现顶部滑动效果(多个页面)
1.TabLayout介绍 TabLayout提供了一个水平的布局用来展示Tabs,很多应用都有这样的设计,典型的有网易新闻,简书,知乎等.TabLayout就可以很好的完成这一职责,首先TabLay ...
POJ_1862 Stripies 【贪心】
一.题面 POJ1862 二.分析反省一下,自己英语水平着实不行,该题其实就是问若给出若干个这种生物,根据这种体重变换方式,最终合并成一个后,体重最少是多少.根据公式 $m = 2\sqrt{m_{ ...
LeetCode902. Numbers At Most N Given Digit Set
题目: We have a sorted set of digits D, a non-empty subset of {'1','2','3','4','5','6','7','8','9'}. ...
bzoj3098 Hash Killer II 生日共计
题目传送门题目大意: 让你构造一个字符串,使字符串在题目给出的哈希条件下统计出错. 思路:生日攻击,结论题,尚未理解. #include<bits/stdc++.h> #define C ...
HOW TO MAKE IT FLOW ?
FLEXnet Licensing is a member of the FLEXnet Publisher family of products. It is the most popular ...
Tomcat SSL证书安装配置
[From Internet] 首先找到安装Tomcat 目录下该文件“Server.xml”,一般默认路径都是在Conf 文件夹中.然后用文本编辑器打开该文件,接着找到 <Connector ...
Hibernate 4 Second Level Caching With EHCache
Hibernate 4 Second Level Caching With EHCache [From] http://www.codesenior.com/en/tutorial/Hibernate ...
python爬虫之User-Agent用户信息
python爬虫之User-Agent用户信息爬虫是自动的爬取网站信息,实质上我们也只是一段代码,并不是真正的浏览器用户,加上User-Agent(用户代理,简称UA)信息,只是让我们伪装成一个浏览 ...
django contenttype 表应用
Django contenttypes 应用 contenttypes 是Django内置的一个应用,可以追踪项目中所有app和model的对应关系,并记录在ContentType表中. 每当我们创建 ...

Js浮动广告效果实现

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

随机推荐

热门专题