利用脚本封装,方便实现网站悬浮广告

原创 2004年07月06日 15:07:00

下面是JS脚本(floatdiv.js)

/*======================================================================
  浮动块支持脚本
  DESIGN BY :  彭国辉
  DATE:        2004-02-26
  SITE:       
http://kacarton.yeah.net/
  BLOG:       
  EMAIL:      
kacarton@sohu.com

  文章为作者原创,转载前请先与本人联系,转载请注明文章出处、保留作者信息,谢谢支持!
======================================================================*/

var alLeft = 0, alCenter = 1, alRight  = 2;   //水平对齐方式
var alTop  = 0, alMiddle = 1, alBottom = 2;   //垂直对齐方式

var f = new Array();
var cnt = 0;

function floatDiv(objId, align, vAlign, x, y, smooth)
{
    /*浮动块对象
      数据结构:
        objId: 对象ID
        align: 水平对齐方式,枚举型
        vAlign:垂直对齐方式,枚举型内容
        x, y:  xy座标,整型
        smooth:平滑移动,布尔型
    */
    this.objId  = objId;
    this.align  = align;
    this.vAlign = vAlign;
    this.x = x;
    this.y = y;
    this.smooth = smooth;
}

function addDiv(objId, align, vAlign, x, y, smooth)
{   //添加浮动块
    f[cnt++] = new floatDiv(objId, align, vAlign, x, y, smooth);
}

function floatMove()
{   //重新定位各块位置
    var objX, objY;
    if (document.all)
    {
        var d = document.body;
//status = "scrollLeft:"+f[0].objId.style.pixelTop+"| offsetWidth:"+d.offsetWidth;
        for (var i=0; i<f.length; i++)
        {
            switch (f[i].align)
            {
                case alLeft  : objX = d.scrollLeft + f[i].x; break;
                case alCenter: objX = d.scrollLeft + Math.ceil((d.offsetWidth - f[i].objId.offsetWidth)/2) + f[i].x; break;
                case alRight : objX = d.scrollLeft + d.offsetWidth - f[i].x - f[i].objId.offsetWidth - 20; break; //减滚动条20
            }
            switch (f[i].vAlign)
            {
                case alTop   : objY = d.scrollTop + f[i].y; break;
                case alMiddle: objY = d.scrollTop + Math.ceil((d.offsetHeight - f[i].objId.offsetHeight)/2) + f[i].y; break;
                case alBottom: objY = d.scrollTop + d.offsetHeight - f[i].y - f[i].objId.offsetHeight; break;
            }
            if (f[i].smooth) smoothMove(f[i].objId, objX, objY);
            else
            {
                f[i].objId.style.pixelLeft = objX;
                f[i].objId.style.pixelTop  = objY;
            }
        }
    }
   
    if (document.layers)
    {
        for (var i=0; i<f.length; i++)
        {
            var objId = f[i].objId;
            switch (f[i].align)
            {
                case alLeft  : objX = pageXOffset + f[i].x; break;
                case alCenter: objX = pageXOffset + Math.ceil((window.innerWidth-objId.width)/2) + f[i].x; break;
                case alRight : objX = pageXOffset + window.innerWidth - f[i].x - document.objId.width; break;
            }
            switch (f[i].vAlign)
            {
                case alTop   : objY = pageYOffset + f[i].y; break;
                case alMiddle: objY = pageYOffset + Math.ceil(window.innerHeight/2) + f[i].y; break;
                case alBottom: objY = pageYOffset + window.innerHeight - f[i].y - document.objId.height; break;
            }
            if (t[i].smooth) smoothMove(f[i].objId, objX, objY);
            else
            {
                document.objId.left = objX;
                document.objId.top  = objY;
            }
        }
    }
   
    setTimeout("floatMove();",50);
}

function smoothMove(obj, x, y)
{
    var percent;
    if (document.all)
    {
        percent = .1 * (x - obj.style.pixelLeft);
        if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent);
        obj.style.pixelLeft += percent;
       
        percent = .1 * (y - obj.style.pixelTop);
        if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent);
        obj.style.pixelTop += percent;
    }
    if (document.layers)
    {
        percent = .1 * (x - document.objId.left);
        if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent);
        document.objId.left += percent;
       
        percent = .1 * (y - document.objId.top);
        if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent);
        document.objId.top += percent;
    }
}


setTimeout("floatMove();",50);

调用例子:

");
}
addDiv(ad_hr, alRight, alTop, 0, 30, true);
<script language="javascript" src="lib/floatdiv.js"></script>
<script language="javascript">
if (navigator.appName == "Netscape")
{
    document.write("<layer id=ad_hr top=300 width=100 height=120><a href=http://www.fpc.org.cn/hr/040522.htm target=_blank><img src='ad/hr40522.gif' width=120 height=180 border=0></a></layer>");
}
else
{
    document.write("<div id=ad_hr style='position: absolute;width:120;top:300;left:5;visibility: visible;z-index: 1'><a href=http://www.fpc.org.cn/hr/040522.htm target=_blank><img src='ad/hr40522.gif' width=120 height=180 border=0></a></div>");
}
addDiv(ad_hr, alRight, alTop, 0, 30, true);
</script>

基于JQuery网页漂浮广告窗口Js详解

网页类似广告漂浮窗口的制作思路以及详细代码
  • u011427035
  • u011427035
  • 2016年04月06日 09:38
  • 6495

悬浮广告&漂浮广告

.floatad{ position:fixed; left:10px; bottom:10px;} .floatad .close a{ font-size:12px; text-decorat...
  • hyt48079287
  • hyt48079287
  • 2016年01月28日 21:42
  • 558

JS+CSS 实现 悬停广告

效果图 第一种 第二种 封装效果图第一种在onscroll方法中调用move方法 move方法中直接设置广告top为body卷曲的高度 缺点:没有缓慢移动的效果 移动的小广告...
  • mixi9760
  • mixi9760
  • 2016年07月28日 10:31
  • 481

基于Cookie信息的互联网精准广告定向技术研究

在今年的315晚会上,有一个词再次引起了广大网友的关注,那就是Cookie,其实关于个人在网络上的信息安全问题,IT界的几位巨头也曾为此争论了好久,最终也是不了了之。那么Cookie究竟是什么呢?Co...
  • my383617487
  • my383617487
  • 2015年09月20日 23:06
  • 2395

Android悬浮窗实现 使用WindowManager

最近项目要做一个悬浮窗的广告栏,闲来无事,就做了一个demo,不足之处,敬请吐槽!其实功能非常简单,就是在系统上弹出一个跑马灯的textView,循环播放,就跟电视上一样,时不时在屏幕顶端弹一个广告,...
  • clever_jian
  • clever_jian
  • 2017年05月26日 09:51
  • 674

上网页面被强制广告——简单分析

附转载地址http://blog.csdn.net/wangqiuyun/article/details/45424307 一、现象描述 事情起因很简单,最近家里打开网页,老发现有点不正常...
  • Rogger_chen
  • Rogger_chen
  • 2016年11月24日 15:29
  • 576

笔记:后台设置网站广告

可以参考的内容:kingEditor单文件上传组件使用,表单批量提交及其优化,图片预览效果,数据回显 效果图: jsp页面:sitead.jsp td { font-size:...
  • qq_34590943
  • qq_34590943
  • 2016年09月05日 19:21
  • 314

html+javascript实现广告窗自由浮动

首先介绍一种设置div初始位置的定位方法: .html代码如下: 层的移动 #ad{width:120px;height:120px;background:url(images/def...
  • yayun0516
  • yayun0516
  • 2014年11月27日 14:44
  • 3924

Android 仿知乎创意广告 广告还能这么玩?

本文已在我的公众号hongyangAndroid原创首发。 转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/787...
  • lmj623565791
  • lmj623565791
  • 2017年12月05日 09:45
  • 6746

垂直网络广告

垂直网络广告是指广告发布主体利用网络广告投放平台,为不同行业的广告客户提供针对其特定目标客户群的细分广告服务,让广告的受众能够从互联网快捷地获得所需要的行业或商品类别信息。以CPM为主要计费方式。...
  • fabbychips
  • fabbychips
  • 2017年04月19日 11:29
  • 486
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用脚本封装,方便实现网站悬浮广告
举报原因:
原因补充:

(最多只允许输入30个字)