jQuery+CSS3模拟印钞效果

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

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

以下是 jQuery+CSS3模拟印钞效果的示例演示效果:

当前平台(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>rmb</title>
<style>

*{
	margin:0;
	padding:0;
}

h1{
	position:absolute;
	bottom:10px;
	right:10px;
	font:bold 48px Georgia, "Times New Roman", Times, serif;
	color:#333;
	text-shadow:2px 2px 2px #FFF;
	z-index:0;
}

.container{
	background:url(images/dollar.jpg);
	position:absolute;
	width:1024px;
	*width:1007px;
	height:100%;
}

.money{
	background:url(images/rmb1.jpg) no-repeat;
	width:250px;
	height:500px;
	margin:50px auto 0;
	box-shadow:6px 6px 4px rgba(0,0,0,0.7);
	outline:none;
	display:block;
	cursor:pointer;
	/*For IE 7*/
	*margin:0;
	*position:absolute;
	*left:39%;
	*top:50px;
}


.new{
	background:url(images/rmb1.jpg);
	width:250px;
	height:500px;
	position:absolute;
	box-shadow:8px 8px 4px rgba(0,0,0,0.7);
	-webkit-transform:scale(1.01);
	-moz-transform:scale(1.01);
	-o-transform:scale(1.01);
	-ms-transform:scale(1.01);
}

.small{
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-o-transform:scale(1.1);
	-ms-transform:scale(1.1);
}

#bag{
	background:url(images/bag.png);
	width:140px;
	height:200px;
	position:absolute;
	top:50px;
	left:50px;
	cursor:pointer;
}


</style>
</head>

<body>
<div class="container">
      <h1>Exchange Rate</h1>
      <div id="bag"></div>
      <div class="money"></div>
</div>
</body>
</html>
<script src="jquery-1.7.min.js"></script>
<script>
$(function(){
		   var process = false;	

		   var left = $(".money").offset().left;
		   var top = $(".money").offset().top;
		   var height = $(".money").height();
		   

		  setInterval(function money(){
				if(process){}
				else{
				process = true;				 
		        $("<div></div>").addClass("new")
				                .css({"left":left,"top":-height})
								.appendTo(".container")
								.animate({"top":50},700,init);	
					
				}
				
				               function init(){
										   $(".money").remove();
										   $(".new").removeClass("new")
													.addClass("money");
										   process = false;	 
		                         }

		   },500)

})
</script>

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