仿雅虎首页巨幅广告

今天头把雅虎中国的地址发我，我还以为让我看新闻呢。

结果他说，你仿照这个广告做个，咱首页要用。

我研究半天雅虎的代码，调用的是他们自己写的通用js类库，把它们全部都拿过来，不太现实，就自己动手写个吧。

帖出来，同大家分享

关键是js的setInterval方法。定时执行

setInterval（function,time）

function 是要执行的方法，time 是多长时间执行一次

下面是Load方法，需要参数 窗口Id ，图片或Flash路径，广告加载时间，宽度和高度

 

//加载
function loadAdPush(id,url,time,width,height){
    //判断后缀        
    var AdPushExtend = url.substring(url.lastIndexOf('.')).toLowerCase();
    var ImageFileExtend = ".gif,.png,.jpg,.ico,.bmp";
    var str = "广告文件格式不被支持！@_@";
    if(AdPushExtend == ".swf"){
            str =  '<object classid="AdPushId" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" '
                + ' id="AdPushId" width="'+width+'" height="'+height+'">'
                + '<param name="movie" value="'+url+'">'
                + '<param name="wmode" value="opaque">' 
                + '<param name="loop" value="true">' 
                + '<param name="quality" value="high">'
                + '<embed name=""AdPushId"" src="' + url + '" loop="true" wmode="opaque" quality="high" '
                + ' swLiveConnect="true" width="' + width + '" height="' + height + '"'
                + ' type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">'
                + '</embed></object>';
    }else if(ImageFileExtend.indexOf(AdPushExtend) > -1){
        str = '<img src="' + url + '" style="width:' + width + 'px;height:' + height + 'px" />';
    }
 var obj = document.getElementById(id);
 obj.style.width = width + "px";
 obj.style.height = height + "px";
 document.write(str);
 
 var i = 1;
  var t = setInterval(function(){
    var setHeight = 5*i++;
    if(setHeight >= height){
        clearInterval(t);
        obj.style.height = height + 'px';
        }else{
    obj.style.height = setHeight + 'px';}
    },10);
    document.getElementById('close-snspush').onclick = function(){clearInterval(t);closeAdsPush(id,height);};
    var end = setTimeout(function(){closeAdsPush(id,height);},time*1000);
}

 

卸载方法方法，需要参数 窗口Id 和高度

 

//卸载
function closeAdsPush(id,height){
 var obj = document.getElementById(id);
 var i = 1;

 var t = setInterval(function(){
    var setHeight = height - 5*i++;
    if(setHeight <= 0){
        clearInterval(t);
        obj.parentNode.removeChild(obj);
        }else{
    obj.style.height = setHeight + 'px';}
    },10);
}

 

调用

 

    <!--start:{adspush-->
    <script src="ycn_fla.js" type="text/javascript"></script>
    <div id="AdPush" style="margin: 8px auto 0px; overflow: hidden; position: relative;">
        <div id="close-snspush" style="right: 5px; cursor: pointer; position: absolute; top: 5px;
            _cursor: hand">
            <img alt="关闭" src="snspush_close.gif"></div>
        <script type="text/javascript">
            //flash
            loadAdPush('AdPush','576553.swf',10,800,246);
            //图片
            //loadAdPush('AdPush','f.bmp',10,900,100);
        </script>
    </div>
    <!--adpush}:end-->

demo下载