Question

我有一个脚本，可以在点击时扩展名为expandedtitle的div。它位于一个名为banner的容器中。我想div expanndedtitle自动扩展

<pre><div id="banner">
    <div id="collapsedtitle">Click To Expand</div>
    <div id="expandedtitle">Expanded</div>

</div>
<div id ="collapsed"></div>
<img id="closeImage" src="images/close100x100.png"></pre>

整个脚本。

<script>var preloadQueue = [ 'SingleExpanding' ];

document.write('<script src="'+ (window.API_URL ||

'http://s1.adform.net/Banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random（））+'“＆gt; ＆LT; /脚本＆GT;'）;

</script>

<script>
    var clickTAGvalue = dhtml.getVar('clickTAG', 'http://www.example.com');
    var landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');

    var closebutton = document.getElementById('closeImage');
    var banner = document.getElementById('banner');
    var collapsed = document.getElementById('collapsed');

    //variables for animation
    var collapsedtitle = document.getElementById('collapsedtitle');
    var expandedtitle = document.getElementById('expandedtitle');
    var logo = document.getElementById('logo');
    var line = document.getElementById('line');
    var border = document.getElementById('border');         

        var SingleExpanding = Adform.Component.SingleExpanding;
        var settings = {
            x: 121, //collapsed part x
            y: 0,   //collapsed part y
            collapsedWidth: 728,
            collapsedHeight: 90,
            expandEasing: SingleExpanding.regularEaseOut,
            collapseEasing: SingleExpanding.regularEaseIn,
            expandTime: 0.5,
            collapseTime: 0.5
        };
        SingleExpanding.init(settings);

        SingleExpanding.on(SingleExpanding.EXPAND_START, function () {
            console.log(SingleExpanding.EXPAND_START);
            expandAnimation ();

        });
        SingleExpanding.on(SingleExpanding.COLLAPSE_START, function () {
            console.log(SingleExpanding.COLLAPSE_START);
            collapseAnimation ();
        });

var bannerNumber = dhtml.getVar('bn', 0);
//if testing locally bannerNumber will be 0, when uploaded to Adform banner will have some bn assigned to it

if (bannerNumber == 0){
    console.log('local');
    closebutton.onclick = function () {
        collapseAnimation ();
    };

    collapsed.onclick = function () {
        expandAnimation ();
    };  
} else {
    console.log('on Adform');
    closebutton.onclick = function () {
        dhtml.external.close && dhtml.external.close();
    };

    collapsed.onclick = function () {
        dhtml.external.expand && dhtml.external.expand();
    };  
}

banner.onclick = function() {
    window.open(clickTAGvalue,landingpagetarget);
}

function expandAnimation (){
//simple banner element animation - TweenLite used as an example
            TweenLite.to(border, 0.5, {css:{width:"970px", height:"415px", left:"0px"}});<strong></strong>
            TweenLite.to(closebutton, 1, {css:{opacity:"1"},delay:0.4});
            TweenLite.to(collapsedtitle, 0.5, {css:{opacity:"0"}});
            TweenLite.to(expandedtitle, 0.5, {css:{opacity:"1"}});
            TweenLite.to(line, 0.5, {css:{top:"230px", left:"300px"}});
            TweenLite.to(logo, 0.5, {css:{width:"170px", top:"340px", left:"790px"}});
            TweenLite.to(collapsed, 0.1, {css:{top:"-90px"}});
}

function collapseAnimation () {
            TweenLite.to(border, 0.5, {css:{width:"728px", height:"90px", left:"121px"}});
            TweenLite.to(closebutton, 0.1, {css:{opacity:"0"}});
            TweenLite.to(collapsedtitle, 0.5, {css:{opacity:"1"}});
            TweenLite.to(expandedtitle, 0.5, {css:{opacity:"0"}});
            TweenLite.to(line, 0.5, {css:{top:"75px", left:"150px"}});
            TweenLite.to(logo, 0.5, {css:{width:"130px", top:"30px", left:"710px"}});
            TweenLite.to(collapsed, 0.1, {css:{top:"0px"}});
}

Answer 1

为什么不用CSS做呢？

在点击时将一个额外的类（例如，'expanded'）添加（或删除）到横幅DIV，并控制调整大小和动画。

点击更改展开以自动展开

1 个答案: