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

随机推荐

undefined reference to symbol ‘_ZN2cv6String10deallocateEv
使用qt编译Caffe时出现如下错误: undefined reference to symbol '_ZN2cv6String10deallocateEv' error adding symbols ...
[Microsoft] 微软技术平台的Cloud Building平台AppVeyor
Link: http://www.tuicool.com/articles/uMBZba http://www.appveyor.com/ 随着云技术的不断完善,基于云的应用越发丰富起来.AppVey ...
Chrome浏览器如何完美实现滚动截图技巧
一.前言我们平时在浏览网页时,想把碰到好的网页内容或者文章截屏保存,但是网页的长度常常会超出屏幕高度,一般的截屏功能只能截取显示在屏幕上的内容,那我们该如何方便快捷截取全部内容?今天就分享一个如何利 ...
Eclipse工程部署到Tomcat时出现中文乱码问题
1.修改Server.xml文件:添加URIEncoding="UTF-8" <?xml version="1.0" encoding="UTF ...
【算法笔记】B1030 完美数列（三种方法）
1030 完美数列 (25 分) 给定一个正整数数列,和正整数 p,设这个数列中的最大值是 M,最小值是 m,如果 M≤mp,则称这个数列是完美数列. 现在给定参数 p 和一些正整数,请你从中选择尽可 ...
Wannafly挑战赛14 - E 并查集维护线性基区间
给一个1-base数组{a},有N次操作,每次操作会使一个位置无效.一个区间的权值定义为这个区间里选出一些数的异或和的最大值.求在每次操作前,所有不包含无效位置的区间的权值的最大值. 线性基删除不知道 ...
SPOJ - REPEATS RMQ循环节
题意:求重复次数最多的重复子串(并非长度最长) 枚举循环子串长度\(L\),求最多能连续出现多少次,相邻的节点往后的判断可以使用\(LCP\)得到值为\(K\),那么得到一个可能的解就是\(K/L+1 ...
HDU - 1520 树形DP入门题
写了两种DP,第一种是按照自己习惯来xjb敲的,第二种参考别人熟悉一下树形DP的套路 dp[i][]是维护i及以下的关系最优值的,所以我觉得两次DP记忆搜索之间不清-1应该是正确的(也就做了一次加法 ...
2019.3.20 I/O相关
I/O 相关简介什么是I/O? IO,即Input (输入)和Output (输出)的首字母缩写. 什么是流? 流(Stream)是抽象概念,它代表任何有能力产出数据的数据源对象或者是与能力接收数据 ...
Mocoserver使用介绍
10.使用flask实现mock server 测试管理基于思维导图的用例设计 https://www.ibm.com/developerworks/cn/web/1405_liugang_moco ...

Js浮动广告效果实现

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

随机推荐

热门专题