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