頁面兩側對聯廣告(允許關閉)代碼效果

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

點擊此處查看效果

  現在很多網站廣告做的如火如荼,現在我就來介紹一下常見的對聯浮動廣告效果的代碼使用方法,本文介紹的這種效果,在1024*768解析度下正常顯示,在800*600的解析度下可以自動隱藏,以免遮住頁面影響訪問者瀏覽內容,而且與前面兩個代碼不同的是,廣告圖下方增加了一個圖片按紐,允許訪客點擊關閉廣告圖片,下面文字框中就是實現效果所需代碼:

 var delta=0.015;
 var collection;
 var closeB=false;
 function floaters() {
 this.items = [];
 this.addItem = function(id,x,y,content)
   {
   document.write('<DIV id='+id+' style="Z-INDEX: 10; 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()',30);
   }
 }
 function play()
 {
  if(screen.width<=800 || closeB)
  {
  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 = '';
  }
 } 
 function closeBanner()
 {
  closeB=true;
  return;
 }

 var theFloaters = new floaters();
 //
 theFloaters.addItem('followDiv1','document.body.clientWidth-100',0,'<a href=http://www.webjx.com target=_blank><img src=/UploadPic/2007-7/200777174430246.gif width=100 height=400 border=0></a><br><img src="/UploadPic/2007-7/200777174430794.gif" >');
 theFloaters.addItem('followDiv2',0,0,'<a href=http://www.webjx.com target=_blank><img src=/UploadPic/2007-7/200777174430259.gif width=100 height=400 border=0 ></a><br><img src="/UploadPic/2007-7/200777174430794.gif" >');
 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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。