会员登陆
登录加载中...
超级搜索
栏  目  
类  别  
关键词  
 站内搜索   网络搜索
  
 当前位置:教程首页>>Pro版本>>Pro V1.X版本>>在网页左右两边加入对联广告
推荐给你的朋友阅读:

在网页左右两边加入对联广告

来源:飞腾设计网 发表日期: 2006-05-29 19:58:30

    其实这个效果源代码在网上到处都有。但——既然有客户询问PRO中加入此效果的问题,下面就写了一个教程,供大家参考。

     将下面的代码保存为float.js文件:

 var delta=0.15
 var collection;
 function floaters() {
  this.items = [];
  this.addItem = function(id,x,y,content)
      {
     document.write('<DIV id='+id+' style="Z-INDEX: 10; POSITION: absolute;  width:222px; height:160px;left:'+(typeof(x)=='string'?eval(x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>');
     
     var newItem    = {};
     newItem.object   = document.getElementById(id);
     newItem.x    = x;
     newItem.y    = y;

     this.items[this.items.length]  = newItem;
      }
  this.play = function()
      {
     collection    = this.items
     setInterval('play()',10);
      }
  }
  function play()
  {
   if(screen.width<=800)
   {
    for(var i=0;i<collection.length;i++)
    {
     collection[i].object.style.display = 'none';
    }
    return;
   }
   for(var i=0;i<collection.length;i++)
   {
    var followObj  = collection[i].object;
    var followObj_x  = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);
    var followObj_y  = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);

    if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x)) {
     var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
     dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
     followObj.style.left=followObj.offsetLeft+dx;
     }

    if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {
     var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
     dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
     followObj.style.top=followObj.offsetTop+dy;
     }
    followObj.style.display = '';
   }
  }
 var theFloaters  = new floaters();
//右边 表格加文字效果
 theFloaters.addItem('followDiv1','document.body.clientWidth-224',1,'<table border=0 width=100% bgcolor=#ffffff cellspacing="0" cellpadding="0"><tr><td background="skins/studioskin/top.gif" height="86" align=center><h3>FeitecCMS PRO特色</h3>Ver:FeitecCMS Pro V1.1</td></tr><tr><td height="28" background="skins/studioskin/nav_bg.gif"></td></tr><tr><td background="skins/studioskin/nav_1.gif" height="11"></td></tr></table><table border=0 width=100% bgcolor=#F4F0E5 cellspacing="0" cellpadding="0" height=480><tr><td align=center></td></tr><tr><td valign=top><UL><li>采用缓存技术</li><li>完全兼容IE与Firefox</li><li>风格模板技术</li><li>自由设置的SQL防注功能</li><li>功能强大的参数过滤功能,确保程序安全</li><li>交互式会员系统,VIP会员可发布文章/图片/软件/新闻</li><li>自由编辑管理员、会员权限</li><li>全站最新信息RSS生成</li><li>频道功能</li><li>频道生成栏目功能</li><li>在线文件资源修改器</li><li>网站音乐播放器</li><li>上传文件超强过滤</li><li>上传文件智能化分类管理</li><li>管理员公告板及会员公告板,类似便笺,便于站内适时交流</li><li>后台栏目同步发表功能</li><li>广告系统</li><li>订单系统</li><li>客户管理</li><li><a href="ProInfo.asp" target="_blank"><font color=red>点击获知更多详情……</font></a></li></UL></td></tr></table>');
//左边 图片效果
 theFloaters.addItem('followDiv2',0,5,'<a href=  target=_blank><img src="images/feiteclogo.gif" border="0" alt="飞腾设计网"></a>');

 theFloaters.play();

    其中,红色部分为左右对联广告显示的内容,支持图片及HTML语法,蓝色字体部分为显示的大小以及左边距及顶边距。

    引用:

    将此文件放于相应SKIN目录中,进入后台相应风格模板——总风格模板,将下面的代码——

<script language="javascript" src="skins/studioskin/float.js"></script>

    放于脚部代码中——这样不会影响页面显示速度。

    效果:

    在800分辩率下,该对联广告自动隐藏,在1024分辩率下,将自动显示于网页两侧,且随滚动条上下移动。

0
1
[作者:raincity 关键词:FeitecCMS Pro 录入:raincity 责编:raincity 阅读次数:3172]

相关文章 相关新闻 相关软件 相关教程 公共评论 发表评论

  • ·暂无相关内容
    评论载入中...
    您的称呼  验 证 码   
    您的评论 [ 最多字数:  已用字数:剩余字数:]

     
COPYRIGHT 2003-2010 创意飞腾科技有限公司(The Feitec LTD.) ALL RIGHTS RESERVED .
官方咨询官方咨询4376161 官方咨询526743959 技术支持:FeitecCMS5366464
页面加载时间:93.75ms Powered By:FeitecCMS V4.0(Build1101)
[蜀ICP备05000881]