平面设计教程提供行业内各种相关的软件教程和理论教程,是您学习平面设计的好地方. 设为首页加入收藏
您当前所在的位置:首页>>平面设计教程>>正文

页面两侧对联广告代码效果

文章来源:网络  作者:佚名  更新时间:2005-1-13 21:08:46

  现在很多网站广告做的如火如荼,现在我就来介绍一下常见的对联浮动广告效果的代码使用方法,本文介绍的这种效果,在1024*768分辨率下正常显示,在800*600的分辨率下可以自动隐藏,以免遮住页面影响访问者浏览内容,下面文本框中就是实现效果所需代码:

  var delta=0.015
  var collection;
  function floaters() {
    this.items  = [];
    this.addItem  = function(id,x,y,content)
         {
          document.write('<DIV id='+id+' style="Z-INDEX: 0; POSITION: absolute; width:80px; height:60px;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-100',0,'</a><br><a href=广告链接地址 target=_blank><img src=广告图片地址 width=100 height=400 border=0></a>');
  theFloaters.addItem('followDiv2',0,0,'<br><a href=广告链接地址 target=_blank><img src=广告图片地址 width=100 height=400 border=0></a>');
  theFloaters.play(); 

把上面的代码另存为一个JS文件,然后在想实现此效果的页面用<script type="text/javascript" language="javascript1.2" src="*.js"></SCRIPT>调用即可,*代表你另存的文件名!注意修改广告图片地址和连接地址!

责任编辑:three
转载请注明出处三视觉平面设计在线 请不要修改文字图片链接信息
上一篇文章:CORELDRAW向PHOTOSHOP格式转换之比较
下一篇文章:对联广告代码效果大全
相关设计
24小时弹一次代码
对联广告代码效果大全
对联广告代码对联漂浮广告代码
对联广告代码效果大全
为你的网页链接加上快捷键
多种网页弹出窗口代码
国外空间乱码显示问题的解决
 
热门设计推荐
百事集团的部分饮料包装设计
英国设计机构ZipDesign平面设
电影《灵异孤儿院》海报设计
美国设计机构VSA Partners平
Companhia Athletica插画类经
奥地利设计师Bohatsch Walte
经典国外企业画册设计欣赏
西班牙设计师Eskenazi Mario
Eric Lin时尚类平面设计作品
Logomotive经典标志设计欣赏
国外设计师的文字创意设计
Amanda Cho精彩优秀设计作品
Mitchell个性平面设计在线欣
有趣的Whiskas插画创意思设计
Jenny Song综合类设计作品欣
部分Jennifer Platte排版设计
Logomotive经典标志设计欣赏
利用布娃娃设计出的系列创意
国外优秀简单标志设计欣赏
Lauren Y.Chen瓶贴等包装设计
精彩推荐
平面设计教程不但能提升您的设计和软件操作水平,还能从中获得很多经验和执行手法,使得学习过程中增添了不少乐趣.