延時關閉的頂部廣告

延時關閉的頂部廣告

一個非常簡單的效果，寫了個DEMO，主要是考慮了一下鼠標的交互，和廣告開關方便，畢竟廣告挺煩人的，不是每個人都想看。

 1 jQuery(function(){
 2         var adtimer=false;
 3         var admouse=false;
 4         var adcon=jQuery("#ad"); //廣告主體
 5         var adshut=jQuery("#adshut"); //廣告關閉按鈕
 6         var adshow=jQuery("#adshow"); //廣告重播
 7         var adelaytime=1000; //頁面加載完畢等待時間
 8         var adshowtime=5000; //顯示時間
 9         var admovespeed=600; //縮放時間
10         var showad=function(){ //顯示
11             adcon.slideDown(admovespeed);
12             adshow.hide();
13             }
14         var hidead=    function(){ //隱藏
15             adcon.slideUp(admovespeed,function(){adshow.show();});            
16             }
17         adtimer=setTimeout(showad,adelaytime);    //延時顯示
18         if(adtimer){ //延時隱藏
19             admouse=setTimeout(hidead,adshowtime);
20             }
21         //鼠標進入廣告區域取消延時關閉    如不需要則刪除
22         adcon.hover(function(){
23                 if(admouse) clearTimeout(admouse);
24             },function(){
25                 admouse=setTimeout(hidead,adshowtime);
26             })    
27         //結束 adcon.hover
28         //手動關閉廣告按鈕    
29         adshut.click(function(){
30             hidead();
31         })
32         adshow.click(function(){
33             showad();
34         })
35         
36         //結束

37     })