全屏弹性伸缩广告代码

最新推荐文章于 2017-03-22 19:58:08 发布

萧逸2005

最新推荐文章于 2017-03-22 19:58:08 发布

阅读量1.1k

点赞数

文章标签： jquery function flash path 框架 object

经常会看到门户网站,如[163网易,新浪,等等],打开页面时隔几秒钟,页面中央也现一个透明的FLASH动画浮出来,展示一段时音后消失,再次打开首页就不会有[这里通过记录cookie来判断，只显示一次，这样必免用户对广告的反感],其原理跟大家分享一下我这里拿jquery框架为列,
1.页面引用jquery框架 jquery-1.4.2.min.js[最新的,老版也样] jquery.cookie.js[jquery cookie插件]
2.页面加一个DIV的盒子命名ID =* [我这里就命名为 indexheadpopup],
3.id=indexheadpopup 写样式
<style>
#indexheadpopup{width:600px; height:300px; background:#ff6600;position:absolute;display:none}
</style>
3.就是调用以下的代码
4.就是做FLASH swf透明的动画或图片[这里做动画是FLASH导入的文件为PNG 用失量图做效果好]

jQuery(function() {
var COOKIE_NAME = "mode"; //定义cookie名称
if( $.cookie(COOKIE_NAME)){
$("#indexheadpopup").hide();
}else{
var winH = $(window).height(); //获取窗口高度
var winW = $(window).width(); //获取窗口宽度度
$("#indexheadpopup").css({'top': winH/2-$("#indexheadpopup").height()/2,'left': winW/2-
$("#indexheadpopup").width()/2 }); //这里动画显示的位置
$("#indexheadpopup").slideDown(1000, function() {
setTimeout("ClearIndexHeadPopup()", '18000');
});
//展开1000表示1秒中显示动画 #indexheadpopup 内的东东 18000就是18秒后执行下面的函数ClearIndexHeadPopup
$.cookie(COOKIE_NAME,"mode", { path: '/', expires: 10 });
}
//写入mode cookie名称
});
function ClearIndexHeadPopup() {
$('#indexheadpopup').hide();
//关闭#indexheadpopup东西 ,这里可以用jquery效果里的方法，有很多种，这里就不说了
}
代码写的不好，我也是新手来的，不足的地方希望大家谅解
看了步聚就赶快动手，试试看，demo就不打包了，东西不多，亲自试验一下，很爽的

首页中有,停留几秒中就会显示 ,只会显示一次，删除COOKIE，刷新就可以再显示

JS

jQuery(function() {

		//Set the popup window to center

		var COOKIE_NAME = "mode";

		if( $.cookie(COOKIE_NAME)){

			$("#indexheadpopup").hide();

		}else{

		   var winH = $(window).height();

		   var winW = $(window).width();

		  $("#indexheadpopup").css({'top': winH/2-$("#indexheadpopup").height()/2,'left': winW/2-$("#indexheadpopup").width()/2 });

	        $("#indexheadpopup").slideDown(1000, function() {

	        setTimeout("ClearIndexHeadPopup()", '18000');

	        });

	      $.cookie(COOKIE_NAME,"mode", {path: '/', expires: 1});

		}

		

    });

function ClearIndexHeadPopup() {

	     $('#indexheadpopup').hide();

	        

}



调用的FLASH对像，这里要

<script type="text/javascript"> 

  writeFlash('images/homead.swf',600, 300); 

</script>



这里我简化了flash swf文件的插入方式

http://www.gocd.com.cn/templets/default/js/flash.js




function writeFlash(FlashFile,width, height) 

{ 

document.writeln(" <object classid=/"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000/" codebase=/"http:download.macromedia.com//pub//shockwave//cabs//flash//swflash.cab#version=9,0,28,0/" width=/""+width+"/" height=/""+height+"/"> "); 

document.writeln("          <param name=/"movie/" value=/""+FlashFile+"/" //> "); 

document.writeln("          <param name=/"quality/" value=/"high/" //> "); 

document.writeln("          <param name=/"wmode/" value=/"transparent/" //> "); 

document.writeln("          <embed src=/""+FlashFile+"/" quality=/"high/" pluginspage=/"http:www.adobe.com//shockwave//download//download.cgi?P1_Prod_Version=ShockwaveFlash/" type=/"application//x-shockwave-flash/" width=/""+width+"/" height=/""+height+"/" wmode=/"transparent/"> <//embed> "); 

document.writeln("    <//object> ")