飘动下落的气球动画js特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是飘动下落的气球动画js特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>飘动下落的气球动画js特效</title>
<style type="text/css">
#wrapper{position:relative;width:810px;height:600px;margin:0 auto;}
#balloon1{position:absolute;top:0; left:0;}
#balloon2{position:absolute;top:0;left:0;}
#balloon3{position:absolute;top:0; left:0;}
#balloon4{position:absolute;top:0;left:0;}			
</style>
<script type="text/javascript" src="js/balloon.js"></script>
<script type="text/javascript">			
window.onload = function(){
	var oBalloon1 = new balloon('balloon1');
	var oBalloon2 = new balloon('balloon2');
	var oBalloon3 = new balloon('balloon3');
	var oBalloon4 = new balloon('balloon4');				
}
</script>
</head>
<body>
<div id="wrapper">
	<img src="images/balloon.png" id="balloon1" style="top: 12.7441px; left: 784.454px; ">
	<img src="images/balloon2.png" id="balloon2" style="top: 235.093px; left: 306.266px; ">
	<img src="images/balloon.png" id="balloon3" style="top: 359.42px; left: 265.835px; ">
	<img src="images/balloon2.png" id="balloon4" style="top: 259.495px; left: 779.553px; ">			
</div>
<!--IE6实现PNG图片透明JS代码-->
<script type="text/javascript" src="js/png.js"></script>
</body>
</html>

JS代码(png.js):

/*Correctly handle PNG transparency in Win IE 5.5 & 6.Copyright 2007 Ignia,LLCBased in part on code from from http://homepage.ntlworld.com/bobosola.Use in <HEAD> with DEFER keyword wrapped in conditional comments:<!--[if lt IE 7]><script defer type="text/javascript" src="pngfix.js"></script><![endif]-->*/
function fixPng(){
	var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1]) if ((version >= 5.5 && version < 7.0) && (document.body.filters)){
	for(var i=0;
	i<document.images.length;
	i++){
	var img = document.images[i];
	var imgName = img.src.toUpperCase();
	if (imgName.indexOf(".PNG") > 0){
	var width = img.width;
	var height = img.height;
	var sizingMethod = (img.className.toLowerCase().indexOf("scale") >= 0)? "scale":"image";
	img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src.replace('%23','%2523').replace("'","%27") + "',sizingMethod='" + sizingMethod + "')";
	img.src = "images/blank.gif";
	img.width = width;
	img.height = height;
}
}
}
}
fixPng();

附件:下载该文件资源,减少时间成本(增值服务)