頁面兩側對聯廣告代碼效果

來源:互聯網
上載者:User
對聯|對聯廣告|頁面

點擊此處查看效果

  現在很多網站廣告做的如火如荼,現在我就來介紹一下常見的對聯浮動廣告效果的代碼使用方法,本文介紹的這種效果,在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>調用即可,*代表你另存的檔案名稱!注意修改廣告圖片地址和串連地址!



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。