转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> Web开发 >> 正文
利用脚本封装,方便实现网站悬浮广告         ★★★★

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

作者:闵涛 文章来源:闵涛的学习笔记 点击数:474 更新时间:2009/4/23 11:21:37
 

下面是JS脚本(floatdiv.js)

/*======================================================================
  浮动块支持脚本
  DESIGN BY :  彭国辉
  DATE:    2004-02-26
  SITE:    
http://kacarton.yeah.net/
  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);

调用例子:

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


没有相关教程
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台