滑動展開/收縮廣告代碼執行個體效果

來源:互聯網
上載者:User
廣告 功能說明:
滑動展開/收縮廣告效果,可指定:廣告完全展開時的停留時間,最大高度

相容瀏覽器:
IE5.0+、FF1.06+、Opera8.0+

執行個體代碼: 
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 
<head> 
<title> 代碼執行個體:滑動展開/收縮廣告 </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
<meta name="author" content="楓岩,CNLei.y.l@gmail.com"> 
<meta name="keywords" content="代碼執行個體:滑動展開/收縮廣告" /> 
<script type="text/javascript"> 
var intervalId = null; 
function slideAd(id,nStayTime,sState,nMaxHth,nMinHth){ 
  this.stayTime=nStayTime*1000 || 3000; 
  this.maxHeigth=nMaxHth || 90; 
  this.minHeigth=nMinHth || 1; 
  this.state=sState || "down" ; 
  var obj = document.getElementById(id); 
  if(intervalId != null)window.clearInterval(intervalId); 
  function openBox(){ 
   var h = obj.offsetHeight; 
   obj.style.height = ((this.state == "down") ? (h + 2) : (h - 2))+"px"; 
    if(obj.offsetHeight>this.maxHeigth){ 
    window.clearInterval(intervalId); 
    intervalId=window.setInterval(closeBox,this.stayTime); 
    } 
    if (obj.offsetHeight<this.minHeigth){ 
    window.clearInterval(intervalId); 
    obj.style.display="none"; 
    } 
  } 
  function closeBox(){ 
   slideAd(id,this.stayTime,"up",nMaxHth,nMinHth); 
  } 
  intervalId = window.setInterval(openBox,10); 

</script> 
</head> 
<body style="margin:0;padding:0;font-size:14px;"> 
<div id="MyMoveAd" style="background:#ff0;height:12px;overflow:hidden;"> 
<ul> 
 <li>這裡是廣告內內容</li> 
 <li>這裡是廣告內內容</li> 
 <li>這裡是廣告內內容</li> 
 <li>這裡是廣告內內容</li> 
 <li>這裡是廣告內內容</li> 
 <li>這裡是廣告內內容</li> 
 <li>這裡是廣告內內容</li> 
 <li>這裡是廣告內內容</li> 
 <li>這裡是廣告內內容</li> 
 <li>這裡是廣告內內容</li> 
 <li>這裡是廣告內內容</li> 


 <li>這裡是廣告內內容</li> 
 <li>這裡是廣告內內容</li> 
 <li>這裡是廣告內內容</li> 
 <li>這裡是廣告內內容</li> 
</ul> 
</div> 
<p>代碼執行個體:<strong>滑動展開/收縮廣告</strong>   請重新整理頁面,再次觀看示範效果</p> 
<script type="text/javascript"> 
 <!-- 
 slideAd(’MyMoveAd’,2); 
--> 
</script> 
</body> 
</html>



相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。