【原】可关闭，可重播的flash弹出广告代码

最新推荐文章于 2022-03-11 10:02:18 发布

转载最新推荐文章于 2022-03-11 10:02:18 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/laichendong/blog/283833

文章标签：

#javascript #xhtml #python #ViewUI

本文介绍了一款自定义的弹窗广告组件实现方法，包括初始化配置、显示和隐藏广告等功能，并提供了完整的JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

以前都是下别人的过来改，老是出现各种各样的莫名其妙的问题。今天终于爆发了。自己写了一个。还是学到一些东西的。不多说，上代码：

代码

  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 }

使用方法也很简单：

代码

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 >

init的参数可以参照源码中的options对象，缺省的可以不写

转载于:https://my.oschina.net/laichendong/blog/283833