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

随机推荐

请求一个域名ip的缓存用处
前言摘录自操作系统,这一段的内容很有启发,稍微加上自己的理解,写一篇博客记录一下. 缓存缓存成功解决了速度不匹配设备之间的数据传输,并且在一般情况下,是整个系统的瓶颈:缓存的出现,有效减少了低速I ...
php 对象方式传入参数
类是单例模式,对象方式传入参数,如果参数过多是,使用形参容易混乱 class Object { /** * 基本配置信息 * @var array */ private $config = array ...
HDU 6325 Problem G. Interstellar Travel(凸包)
题意: 给你n个点,第一个点一定是(0,0),最后一个点纵坐标yn一定是0,中间的点的横坐标一定都是在(0,xn)之间的然后从第一个点开始飞行,每次飞到下一个点j,你花费的价值就是xi*yj-xj* ...
求一个区间里的一个x，这个x与这区间里面的所有数都互质
链接:https://ac.nowcoder.com/acm/contest/301/H来源:牛客网题描述小乐乐上了一节数学课,数学老师讲的很好,小乐乐听的也如痴如醉. 小乐乐听了老师的讲解,知道 ...
Apache Shiro(五)-登录认证和权限管理ssm
创建一个web动态项目 jar包 web.xml web.xml做了如下几件事情1. 指定spring的配置文件有两个 applicationContext.xml: 用于链接数据库的 applica ...
批量删除Maven中失败的下载项
[摘自] http://stackoverflow.com/questions/5074063/maven-error-failure-to-transfer Remove all your fail ...
使用kafka bin目录中的zookeeper-shell.sh来查看kafka在zookeeper中的配置
cd kafka_2.11-0.10.2.1\bin\windowsecho ls /brokers/ids | zookeeper-shell.bat localhost:2181 使用kafka ...
vector与array之间转换，向量与数据之间转换
一维数组: vector<int> a; int b[5] = {1,2,3,4,5}; a.push_back(b); 二维数组: b[5][6] = {1,2,3,4,5,6... ...
「bzoj1003」「ZJOI2006」物流运输最短路+区间dp
「bzoj1003」「ZJOI2006」物流运输---------------------------------------------------------------------------- ...
Activemq API使用(不整合spring)
首先需要引入activemq的jar包,这里用的是5.14.4版本的 <!-- https://mvnrepository.com/artifact/org.apache.activemq/ac ...

Js浮动广告效果实现

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

随机推荐

热门专题