延时关闭的顶部广告

一个非常简单的效果,写了个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     }) 

原文地址:https://www.cnblogs.com/trance/p/1508419.html