根據其狀態向展開式廣告添加打開/關閉文字

我已將JavaScript展示爲展開式廣告，首先將其展示爲960x30，等待3秒鐘，將其展開至960x300，等待3秒鐘，然後將其縮回到960x30。一旦這個過程完成，用戶可以點擊它在兩種尺寸之間切換。我們通過Google廣告管理系統投放廣告，以便檢測是否有廣告展示，如果存在，我將滑動課程放在Google自動包裝廣告的div上。根據其狀態向展開式廣告添加打開/關閉文字

我需要的是有文字或圖形，可以在廣告的角落「展開」（處於960x30的狀態）和「摺疊」（處於960x300的狀態）之間切換，同時仍允許點擊廣告的其餘部分一個正常的廣告。我希望這一切都有道理，我真的希望有人能爲我帶回家！下面的代碼我有：

<head> 

<!-- load jquery --> 
<script type="text/javascript" src="../js/jquery1_7.js"></script> 
<!-- load jquery : end --> 

<!-- load google DFP --> 
<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'></script> 
<script type='text/javascript'> 
    GS_googleAddAdSenseService("ca-pub-XXX"); 
    GS_googleEnableAllServices(); 
</script> 
<script type='text/javascript'> 
    GA_googleAddSlot("ca-pub-XXX", "TEST_960x300"); 
</script> 
<script type='text/javascript'> 
    GA_googleFetchAds(); 
</script> 
<!-- load google DFP : end --> 

<!-- intial load as open and click toggle --> 
<script type="text/javascript"> 
$(window).load(function(){ 
$('.slider').delay(3000).animate({height:300}).delay(3000).animate({height:30}, function() { 
    $(this).click(function() { 
     if ($(this).height()==30) { 
      $(this).animate({height:300}); 
     } else { 
      $(this).animate({height:30}); 
     } 
    }); 
}); 
}); 
</script> 
<!-- intial load as open and click toggle : end --> 


<!-- slider class --> 
<style type='text/css'> 
.slider { 
    width:960px; 
    height:30px; 
    cursor: pointer; 
    overflow: hidden; 
    margin-left: 0px; 
    position: relative; 
} 
</style> 
<!-- slider class : end --> 

</head> 

<body> 

<p>stuff above the slider</p> 

<!-- TEST_960x300 --> 
<script type='text/javascript'> 
GA_googleFillSlot("TEST_960x300"); 
</script> 
<!-- TEST_960x300 : end --> 

<p>stuff below the slider</p> 



<!-- detect if DFP has an ad in the ad slot --> 
<script type='text/javascript'> 

if(document.getElementById('google_ads_div_TEST_960x300_ad_container')){ 
    document.getElementById('google_ads_div_TEST_960x300_ad_container').setAttribute("class", "slider"); 
} 

//For IE since it seems DFP outputs a different div for IE. 
if(document.getElementById('google_ads_div_TEST_960x300')){ 
    document.getElementById('google_ads_div_TEST_960x300').setAttribute("class", "slider"); 
} 

</script> 
<!-- detect if DFP has an ad in the ad slot : end --> 


</body>

來源

2011-11-09 86Stang

你可能會想重新組織你的JS一點點，使這一任務更容易：

function openAd() { 
    // stop any current animation 
    // slide the ad open 
} 
function closeAd() { 
    // stop any current animation 
    // slide the ad closed 
}

如果我正確理解你的問題，剩下的就是漂亮直截了當：

創建「展開」和「摺疊」按鈕，並將它們添加到DOM。這些可能只是正常的<a>元素或按鈕或其他。沒什麼大不了的。
根據廣告的當前狀態控制每個按鈕何時顯示。廣告摺疊後，只顯示展開按鈕。廣告展開時，只顯示摺疊的按鈕。
將事件監聽器添加到按鈕。因爲你使用的是jQuery，所以這應該不成問題。像$(yourExpandButton).on('click', openAd);東西（需要注意的是，它使用1.7 on功能。）

來源

2011-11-09 17:39:28 sdleihssirhc

有一個稍微不同的方式做到這一點，如果這是不是你幹夠。您只需創建一個按鈕，然後在「展開」和「摺疊」之間切換文本（或圖片等），您就可以擁有一個「打開/關閉」功能，根據當前狀態展開或摺疊廣告。這主要是品味的問題。 – sdleihssirhc

我寧願這樣做，但我不是一個javascripter，甚至不知道從哪裏開始。有點失落...... – 86Stang

根據其狀態向展開式廣告添加打開/關閉文字

回答

相關問題