仿雅虎首页巨幅广告

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

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

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

帖出来,同大家分享

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

setInterval(function,time)

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

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

 

ContractedBlock.gif ExpandedBlockStart.gif Code
//加载
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 和高度

 

ContractedBlock.gif ExpandedBlockStart.gif Code
//卸载
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);
}

 

调用

 

ContractedBlock.gif ExpandedBlockStart.gif Code
    <!--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下载

转载于:https://www.cnblogs.com/zhuyue/archive/2009/02/03/1383256.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值