【原】可关闭,可重播的flash弹出广告代码
以前都是下别人的过来改,老是出现各种各样的莫名其妙的问题。今天终于爆发了。自己写了一个。还是学到一些东西的。不多说,上代码:
代码
1 var popFlash = new Object();
2 popFlash = {
3 //初始化
4 init : function(options){
5 if(typeof(options)!='object'){
6 return false;
7 }
8 //初始化参数
9 this.options = {
10 //广告显示宽度
11 width : (options.width ? options.width : 500),
12 //广告显示高度
13 height : (options.height ? options.height : 300),
14 //广告显示时长
15 showTime : (options.showTime ? options.showTime : 5000),
16 //广告插件基准路径
17 basePath : (options.bathPath ? options.basePath : ""),
18 //swf文件名
19 swfSrc : (options.swfSrc ? options.swfSrc : "ad.swf"),
20 //缩略图文件名
21 iodSrc : (options.iocSrc ? options.iocSrc : "ioc.gif"),
22 //广告指向的链接
23 adHref : (options.adHref ? options.adHref : "about:blank")
24 }
25 },
26
27 //拼装打开状态的html
28 createOpenedHtml : function() {
29 var openedHtml = "";
30 openedHtml += '<div id="openedLayer" style="width:'+ this.options.width +'px; height:'+ this.options.height +'px; display:block;">';
31 openedHtml += '<div style="position:relative">';
32 openedHtml += '<div id="closer" style="cursor:pointer;" onclick="javascript:popFlash.hidden();" >';
33 openedHtml += '<img src="'+this.options.basePath+'closer.gif" border="0"/>';
34 openedHtml += '</div>';
35 openedHtml += '<a href="'+ this.options.adHref +'" target="_blank" style="padding:0;margin:0;position:absolute;">';
36 openedHtml += '<img src="'+ this.options.basePath+'blank.gif" width="'+ this.options.width +'" height="'+ this.options.height +'" border="0" />';
37 openedHtml += '</a>';
38 openedHtml += '<OBJECT id="swfObj" codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0 height='+this.options.height;
39 openedHtml += ' width='+this.options.width+' classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000>';
40 openedHtml += '<PARAM NAME="_cx" VALUE="20320"/><PARAM NAME="_cy" VALUE="2117"/>';
41 openedHtml += '<PARAM NAME="FlashVars" VALUE=""/><PARAM NAME="Movie" VALUE="'+this.options.basePath+this.options.swfSrc+'"/>';
42 openedHtml += '<PARAM NAME="Src" VALUE="'+this.options.basePath+this.options.swfSrc+'"/><PARAM NAME="WMode" VALUE="Transparent"/>';
43 openedHtml += '<PARAM NAME="Play" VALUE="-1"/><PARAM NAME="Loop" VALUE="-1"/>';
44 openedHtml += '<PARAM NAME="Quality" VALUE="High"/><PARAM NAME="SAlign" VALUE=""/>';
45 openedHtml += '<PARAM NAME="Menu" VALUE="0"/><PARAM NAME="Base" VALUE=""/>';
46 openedHtml += '<PARAM NAME="AllowScriptAccess" VALUE="always"/><PARAM NAME="DeviceFont" VALUE="0"/>';
47 openedHtml += '<PARAM NAME="EmbedMovie" VALUE="0"/><PARAM NAME="BGColor" VALUE=""/>';
48 openedHtml += '<PARAM NAME="SWRemote" VALUE=""/><PARAM NAME="MovieData" VALUE=""/>';
49 openedHtml += '<PARAM NAME="SeamlessTabbing" VALUE="1"/><PARAM NAME="Profile" VALUE="0"/>';
50 openedHtml += '<PARAM NAME="ProfileAddress" VALUE=""/><PARAM NAME="ProfilePort" VALUE="0"/>';
51 openedHtml += '<PARAM NAME="AllowNetworking" VALUE="all"/><PARAM NAME="AllowFullScreen" VALUE="false"/>';
52 openedHtml += '<embed allowscriptaccess="always" menu="false" width="'+this.options.width+'" height="'+this.options.height+'" wmode="Transparent" ';
53 openedHtml += 'src="'+this.options.basePath+this.options.swfSrc+'" quality="high"';
54 openedHtml += 'pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="swfObj"></embed>';
55 openedHtml += '</OBJECT>';
56 openedHtml += '<iframe id="asdIframe" src="about:blank" style="position:absolute; visibility:inherit;width:'+this.options.width+'px;height:'+this.options.height+'px; ';
57 openedHtml += 'z-index:-1;filter:Alpha(Opacity=0); opacity:0.0; MozOpacity:0.0; KhtmlOpacity:0.0;left:0px;top:0px;"></iframe>';
58 openedHtml += '</div>';
59 openedHtml += '</div>';
60
61 return openedHtml;
62 },
63
64 //拼装关闭状态的html
65 createClosedHmtl : function(){
66 var closedHtml = '';
67 closedHtml += '<div id="closedLayer" style="position:absolute;left:0px;top:0px; display:block;">';
68 closedHtml += '<img src="'+this.options.basePath+'ioc.gif" />';
69 closedHtml += '<div style="width:76px;padding:2px;height:15px;">';
70 closedHtml += '<div style="float:left;">';
71 closedHtml += '<img src="'+this.options.basePath+'replay_little.gif" border="0" onclick="popFlash.show();" style="cursor:pointer" />';
72 closedHtml += '</div>';
73 closedHtml += '<div style="float:right">';
74 closedHtml += '<img src="'+this.options.basePath+'close_little.gif" border="0" onclick="popFlash.closeAd();" style="cursor:pointer" />';
75 closedHtml += '</div>';
76 closedHtml += '</div>';
77 closedHtml += '</div>';
78 return closedHtml;
79 },
80
81 //显示广告
82 show : function(){
83 //隐藏关闭状态
84 var closedLayer = document.getElementById("closedLayer");
85 if(closedLayer && closedLayer.style.display == "block") {
86 closedLayer.style.display = "none";
87 }
88 //显示打开状态
89 var openedLayer = document.getElementById("openedLayer");
90 if( openedLayer && openedLayer.style.display == "none"){
91 openedLayer.style.display = "block";
92 }else{
93 //document.writeln(popFlash.createOpenedHtml());
94 document.body.innerHTML += popFlash.createOpenedHtml();
95 }
96 popFlash.setPosition();
97
98 //到了显示时长就影藏
99 this.timer = setTimeout("popFlash.hidden()", this.options.showTime);
100
101 },
102
103 //影藏广告
104 hidden : function(){
105 clearTimeout(this.timer);
106 //影藏打开装态
107 var openedLayer = document.getElementById("openedLayer");
108 if (openedLayer && openedLayer.style.display == "block") {
109 openedLayer.style.display = "none";
110 }
111
112 //显示关闭状态
113 var closedLayer = document.getElementById("closedLayer");
114 if( closedLayer && closedLayer.style.display == "none"){
115 closedLayer.style.display = "block";
116 }else{
117 //document.writeln(popFlash.createClosedHmtl());
118 document.body.innerHTML += popFlash.createClosedHmtl();
119 }
120 popFlash.setPosition();
121 },
122
123 //彻底关闭广告
124 closeAd : function(){
125 var openedLayer = document.getElementById("openedLayer");
126 var closedLayer = document.getElementById("closedLayer");
127
128 if(openedLayer){
129 openedLayer.innerHTML = "";
130 }
131 if(closedLayer){
132 closedLayer.innerHTML = "";
133 }
134 },
135
136 //设置广告显示的位置
137 setPosition : function(){
138 var openedLayer = document.getElementById("openedLayer");
139 var closedLayer = document.getElementById("closedLayer");
140
141 if(openedLayer){
142 var marginLeft = this.options.width/2;
143 var marginTop = this.options.height/2;
144 var css = "position:absolute;top:50%;left:50%;margin-left:-"+ marginLeft +"px;margin-top:-"+ marginTop +"px;";
145 css += "width:"+this.options.width+"px;height:"+this.options.height+"px;";
146
147 openedLayer.style.cssText += css;
148 }
149
150 if(closedLayer){
151 var css = "position:absolute;top:50%;left:100%;margin-left:-100px;margin-top:-40px;";
152 css += "width:80px;height:80px;";
153
154 closedLayer.style.cssText += css;
155 }
156 }
157 }
2 popFlash = {
3 //初始化
4 init : function(options){
5 if(typeof(options)!='object'){
6 return false;
7 }
8 //初始化参数
9 this.options = {
10 //广告显示宽度
11 width : (options.width ? options.width : 500),
12 //广告显示高度
13 height : (options.height ? options.height : 300),
14 //广告显示时长
15 showTime : (options.showTime ? options.showTime : 5000),
16 //广告插件基准路径
17 basePath : (options.bathPath ? options.basePath : ""),
18 //swf文件名
19 swfSrc : (options.swfSrc ? options.swfSrc : "ad.swf"),
20 //缩略图文件名
21 iodSrc : (options.iocSrc ? options.iocSrc : "ioc.gif"),
22 //广告指向的链接
23 adHref : (options.adHref ? options.adHref : "about:blank")
24 }
25 },
26
27 //拼装打开状态的html
28 createOpenedHtml : function() {
29 var openedHtml = "";
30 openedHtml += '<div id="openedLayer" style="width:'+ this.options.width +'px; height:'+ this.options.height +'px; display:block;">';
31 openedHtml += '<div style="position:relative">';
32 openedHtml += '<div id="closer" style="cursor:pointer;" onclick="javascript:popFlash.hidden();" >';
33 openedHtml += '<img src="'+this.options.basePath+'closer.gif" border="0"/>';
34 openedHtml += '</div>';
35 openedHtml += '<a href="'+ this.options.adHref +'" target="_blank" style="padding:0;margin:0;position:absolute;">';
36 openedHtml += '<img src="'+ this.options.basePath+'blank.gif" width="'+ this.options.width +'" height="'+ this.options.height +'" border="0" />';
37 openedHtml += '</a>';
38 openedHtml += '<OBJECT id="swfObj" codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0 height='+this.options.height;
39 openedHtml += ' width='+this.options.width+' classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000>';
40 openedHtml += '<PARAM NAME="_cx" VALUE="20320"/><PARAM NAME="_cy" VALUE="2117"/>';
41 openedHtml += '<PARAM NAME="FlashVars" VALUE=""/><PARAM NAME="Movie" VALUE="'+this.options.basePath+this.options.swfSrc+'"/>';
42 openedHtml += '<PARAM NAME="Src" VALUE="'+this.options.basePath+this.options.swfSrc+'"/><PARAM NAME="WMode" VALUE="Transparent"/>';
43 openedHtml += '<PARAM NAME="Play" VALUE="-1"/><PARAM NAME="Loop" VALUE="-1"/>';
44 openedHtml += '<PARAM NAME="Quality" VALUE="High"/><PARAM NAME="SAlign" VALUE=""/>';
45 openedHtml += '<PARAM NAME="Menu" VALUE="0"/><PARAM NAME="Base" VALUE=""/>';
46 openedHtml += '<PARAM NAME="AllowScriptAccess" VALUE="always"/><PARAM NAME="DeviceFont" VALUE="0"/>';
47 openedHtml += '<PARAM NAME="EmbedMovie" VALUE="0"/><PARAM NAME="BGColor" VALUE=""/>';
48 openedHtml += '<PARAM NAME="SWRemote" VALUE=""/><PARAM NAME="MovieData" VALUE=""/>';
49 openedHtml += '<PARAM NAME="SeamlessTabbing" VALUE="1"/><PARAM NAME="Profile" VALUE="0"/>';
50 openedHtml += '<PARAM NAME="ProfileAddress" VALUE=""/><PARAM NAME="ProfilePort" VALUE="0"/>';
51 openedHtml += '<PARAM NAME="AllowNetworking" VALUE="all"/><PARAM NAME="AllowFullScreen" VALUE="false"/>';
52 openedHtml += '<embed allowscriptaccess="always" menu="false" width="'+this.options.width+'" height="'+this.options.height+'" wmode="Transparent" ';
53 openedHtml += 'src="'+this.options.basePath+this.options.swfSrc+'" quality="high"';
54 openedHtml += 'pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="swfObj"></embed>';
55 openedHtml += '</OBJECT>';
56 openedHtml += '<iframe id="asdIframe" src="about:blank" style="position:absolute; visibility:inherit;width:'+this.options.width+'px;height:'+this.options.height+'px; ';
57 openedHtml += 'z-index:-1;filter:Alpha(Opacity=0); opacity:0.0; MozOpacity:0.0; KhtmlOpacity:0.0;left:0px;top:0px;"></iframe>';
58 openedHtml += '</div>';
59 openedHtml += '</div>';
60
61 return openedHtml;
62 },
63
64 //拼装关闭状态的html
65 createClosedHmtl : function(){
66 var closedHtml = '';
67 closedHtml += '<div id="closedLayer" style="position:absolute;left:0px;top:0px; display:block;">';
68 closedHtml += '<img src="'+this.options.basePath+'ioc.gif" />';
69 closedHtml += '<div style="width:76px;padding:2px;height:15px;">';
70 closedHtml += '<div style="float:left;">';
71 closedHtml += '<img src="'+this.options.basePath+'replay_little.gif" border="0" onclick="popFlash.show();" style="cursor:pointer" />';
72 closedHtml += '</div>';
73 closedHtml += '<div style="float:right">';
74 closedHtml += '<img src="'+this.options.basePath+'close_little.gif" border="0" onclick="popFlash.closeAd();" style="cursor:pointer" />';
75 closedHtml += '</div>';
76 closedHtml += '</div>';
77 closedHtml += '</div>';
78 return closedHtml;
79 },
80
81 //显示广告
82 show : function(){
83 //隐藏关闭状态
84 var closedLayer = document.getElementById("closedLayer");
85 if(closedLayer && closedLayer.style.display == "block") {
86 closedLayer.style.display = "none";
87 }
88 //显示打开状态
89 var openedLayer = document.getElementById("openedLayer");
90 if( openedLayer && openedLayer.style.display == "none"){
91 openedLayer.style.display = "block";
92 }else{
93 //document.writeln(popFlash.createOpenedHtml());
94 document.body.innerHTML += popFlash.createOpenedHtml();
95 }
96 popFlash.setPosition();
97
98 //到了显示时长就影藏
99 this.timer = setTimeout("popFlash.hidden()", this.options.showTime);
100
101 },
102
103 //影藏广告
104 hidden : function(){
105 clearTimeout(this.timer);
106 //影藏打开装态
107 var openedLayer = document.getElementById("openedLayer");
108 if (openedLayer && openedLayer.style.display == "block") {
109 openedLayer.style.display = "none";
110 }
111
112 //显示关闭状态
113 var closedLayer = document.getElementById("closedLayer");
114 if( closedLayer && closedLayer.style.display == "none"){
115 closedLayer.style.display = "block";
116 }else{
117 //document.writeln(popFlash.createClosedHmtl());
118 document.body.innerHTML += popFlash.createClosedHmtl();
119 }
120 popFlash.setPosition();
121 },
122
123 //彻底关闭广告
124 closeAd : function(){
125 var openedLayer = document.getElementById("openedLayer");
126 var closedLayer = document.getElementById("closedLayer");
127
128 if(openedLayer){
129 openedLayer.innerHTML = "";
130 }
131 if(closedLayer){
132 closedLayer.innerHTML = "";
133 }
134 },
135
136 //设置广告显示的位置
137 setPosition : function(){
138 var openedLayer = document.getElementById("openedLayer");
139 var closedLayer = document.getElementById("closedLayer");
140
141 if(openedLayer){
142 var marginLeft = this.options.width/2;
143 var marginTop = this.options.height/2;
144 var css = "position:absolute;top:50%;left:50%;margin-left:-"+ marginLeft +"px;margin-top:-"+ marginTop +"px;";
145 css += "width:"+this.options.width+"px;height:"+this.options.height+"px;";
146
147 openedLayer.style.cssText += css;
148 }
149
150 if(closedLayer){
151 var css = "position:absolute;top:50%;left:100%;margin-left:-100px;margin-top:-40px;";
152 css += "width:80px;height:80px;";
153
154 closedLayer.style.cssText += css;
155 }
156 }
157 }
使用方法也很简单:
代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <script type="text/javascript" language="javascript" src="popFlash.js"></script>
7 </head>
8
9 <body>
10 <script>
11 popFlash.init({width:700,height:275});
12 popFlash.show();
13 </script>
14 </body>
15 </html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <script type="text/javascript" language="javascript" src="popFlash.js"></script>
7 </head>
8
9 <body>
10 <script>
11 popFlash.init({width:700,height:275});
12 popFlash.show();
13 </script>
14 </body>
15 </html>
init的参数可以参照源码中的options对象,缺省的可以不写