Question

我有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>

Answer 1

您可能希望稍微重新组织一下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函数。）

根据展开广告的状态向展开式广告添加打开/关闭文字

1 个答案: