jquery animate网站banner动画效果代码

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

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

以下是 jquery animate网站banner动画效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>jquery animate网站banner动画效果</title>
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
<!--[if IE 6]>
<script src="js/DDPngMin.js"></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
</head>

<body>

<div class="fan_banner">
	<div class="bannBg_all">
		<div class="bannerCont">        
			<div class="fan_Tables"></div>
			<div class="fan_people"></div>
			<div class="fan_name"><a href="#"><img src="img/computer.png"></a></div>
			<div class="fan_gg_logo"><img src="img/b4_logo.png"></div>
			<div class="fan_gb"></div>
			<div class="fan_gg_text"><img src="img/want.png"/></div>
			<div class="fan_job"><img src="img/job.png"/></div>
			<div class="fan_want2"><img src="img/want2.png"/></div>
			<div class="fan_free"><img src="img/free.png"/></div>
			<div class="fan_text"><img src="img/txt.png"/></div>
		</div>	
	</div>
</div>

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/maxshu.js"></script>
</body>
</html>

JS代码(DDPngMin.js):

/*** DD_belatedPNG:Adds IE6 support:PNG images for CSS background-image and HTML <IMG/>.* Author:Drew Diller* Email:drew.diller@gmail.com* URL:http://www.dillerdesign.com/experiment/DD_belatedPNG/* Version:0.0.8a* Licensed under the MIT License:http://dillerdesign.com/experiment/DD_belatedPNG/#license** Example usage:* DD_belatedPNG.fix('.png_bg');
	// argument is a CSS selector* DD_belatedPNG.fixPng( someNode );
	// argument is an HTMLDomElement**/
var DD_belatedPNG={
	ns:"DD_belatedPNG",imgSize:{
}
,delay:10,nodesFixed:0,createVmlNameSpace:function(){
	if(document.namespaces&&!document.namespaces[this.ns]){
	document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}
}
,createVmlStyleSheet:function(){
	var b,a;
	b=document.createElement("style");
	b.setAttribute("media","screen");
	document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);
	if(b.styleSheet){
	b=b.styleSheet;
	b.addRule(this.ns+"\\:*","{
	behavior:url(#default#VML)}
");
	b.addRule(this.ns+"\\:shape","position:absolute;
	");
	b.addRule("img."+this.ns+"_sizeFinder","behavior:none;
	border:none;
	position:absolute;
	z-index:-1;
	top:-10000px;
	visibility:hidden;
	");
	this.screenStyleSheet=b;
	a=document.createElement("style");
	a.setAttribute("media","print");
	document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);
	a=a.styleSheet;
	a.addRule(this.ns+"\\:*","{
	display:none !important;
}
");
	a.addRule("img."+this.ns+"_sizeFinder","{
	display:none !important;
}
")}
}
,readPropertyChange:function(){
	var b,c,a;
	b=event.srcElement;
	if(!b.vmlInitiated){
	return}
if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){
	DD_belatedPNG.applyVML(b)}
if(event.propertyName=="style.display"){
	c=(b.currentStyle.display=="none")?"none":"block";
	for(a in b.vml){
	if(b.vml.hasOwnProperty(a)){
	b.vml[a].shape.style.display=c}
}
}
if(event.propertyName.search("filter")!=-1){
	DD_belatedPNG.vmlOpacity(b)}
}
,vmlOpacity:function(b){
	if(b.currentStyle.filter.search("lpha")!=-1){
	var a=b.currentStyle.filter;
	a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf(")")),10)/100;
	b.vml.color.shape.style.filter=b.currentStyle.filter;
	b.vml.image.fill.opacity=a}
}
,handlePseudoHover:function(a){
	setTimeout(function(){
	DD_belatedPNG.applyVML(a)}
,1)}
,fix:function(a){
	if(this.screenStyleSheet){
	var c,b;
	c=a.split(",");
	for(b=0;
	b<c.length;
	b++){
	this.screenStyleSheet.addRule(c[b],"behavior:expression(DD_belatedPNG.fixPng(this))")}
}
}
,applyVML:function(a){
	a.runtimeStyle.cssText="";
	this.vmlFill(a);
	this.vmlOffsets(a);
	this.vmlOpacity(a);
	if(a.isImg){
	this.copyImageBorders(a)}
}
,attachHandlers:function(i){
	var d,c,g,e,b,f;
	d=this;
	c={
	resize:"vmlOffsets",move:"vmlOffsets"}
;
	if(i.nodeName=="A"){
	e={
	mouseleave:"handlePseudoHover",mouseenter:"handlePseudoHover",focus:"handlePseudoHover",blur:"handlePseudoHover"}
;
	for(b in e){
	if(e.hasOwnProperty(b)){
	c[b]=e[b]}
}
}
for(f in c){
	if(c.hasOwnProperty(f)){
	g=function(){
	d[c[f]](i)}
;
	i.attachEvent("on"+f,g)}
}
i.attachEvent("onpropertychange",this.readPropertyChange)}
,giveLayout:function(a){
	a.style.zoom=1;
	if(a.currentStyle.position=="static"){
	a.style.position="relative"}
}
,copyImageBorders:function(b){
	var c,a;
	c={
	borderStyle:true,borderWidth:true,borderColor:true}
;
	for(a in c){
	if(c.hasOwnProperty(a)){
	b.vml.color.shape.style[a]=b.currentStyle[a]}
}
}
,vmlFill:function(e){
	if(!e.currentStyle){
	return}
else{
	var d,f,g,b,a,c;
	d=e.currentStyle}
for(b in e.vml){
	if(e.vml.hasOwnProperty(b)){
	e.vml[b].shape.style.zIndex=d.zIndex}
}
e.runtimeStyle.backgroundColor="";
	e.runtimeStyle.backgroundImage="";
	f=true;
	if(d.backgroundImage!="none"||e.isImg){
	if(!e.isImg){
	e.vmlBg=d.backgroundImage;
	e.vmlBg=e.vmlBg.substr(5,e.vmlBg.lastIndexOf('")')-5)}
else{
	e.vmlBg=e.src}
g=this;
	if(!g.imgSize[e.vmlBg]){
	a=document.createElement("img");
	g.imgSize[e.vmlBg]=a;
	a.className=g.ns+"_sizeFinder";
	a.runtimeStyle.cssText="behavior:none;
	position:absolute;
	left:-10000px;
	top:-10000px;
	border:none;
	margin:0;
	padding:0;
	";
	c=function(){
	this.width=this.offsetWidth;
	this.height=this.offsetHeight;
	g.vmlOffsets(e)}
;
	a.attachEvent("onload",c);
	a.src=e.vmlBg;
	a.removeAttribute("width");
	a.removeAttribute("height");
	document.body.insertBefore(a,document.body.firstChild)}
e.vml.image.fill.src=e.vmlBg;
	f=false}
e.vml.image.fill.on=!f;
	e.vml.image.fill.color="none";
	e.vml.color.shape.style.backgroundColor=d.backgroundColor;
	e.runtimeStyle.backgroundImage="none";
	e.runtimeStyle.backgroundColor="transparent"}
,vmlOffsets:function(d){
	var h,n,a,e,g,m,f,l,j,i,k;
	h=d.currentStyle;
	n={
	W:d.clientWidth+1,H:d.clientHeight+1,w:this.imgSize[d.vmlBg].width,h:this.imgSize[d.vmlBg].height,L:d.offsetLeft,T:d.offsetTop,bLW:d.clientLeft,bTW:d.clientTop}
;
	a=(n.L+n.bLW==1)?1:0;
	e=function(b,p,q,c,s,u){
	b.coordsize=c+","+s;
	b.coordorigin=u+","+u;
	b.path="m0,0l"+c+",0l"+c+","+s+"l0,"+s+" xe";
	b.style.width=c+"px";
	b.style.height=s+"px";
	b.style.left=p+"px";
	b.style.top=q+"px"}
;
	e(d.vml.color.shape,(n.L+(d.isImg?0:n.bLW)),(n.T+(d.isImg?0:n.bTW)),(n.W-1),(n.H-1),0);
	e(d.vml.image.shape,(n.L+n.bLW),(n.T+n.bTW),(n.W),(n.H),1);
	g={
	X:0,Y:0}
;
	if(d.isImg){
	g.X=parseInt(h.paddingLeft,10)+1;
	g.Y=parseInt(h.paddingTop,10)+1}
else{
	for(j in g){
	if(g.hasOwnProperty(j)){
	this.figurePercentage(g,n,j,h["backgroundPosition"+j])}
}
}
d.vml.image.fill.position=(g.X/n.W)+","+(g.Y/n.H);
	m=h.backgroundRepeat;
	f={
	T:1,R:n.W+a,B:n.H,L:1+a}
;
	l={
	X:{
	b1:"L",b2:"R",d:"W"}
,Y:{
	b1:"T",b2:"B",d:"H"}
}
;
	if(m!="repeat"||d.isImg){
	i={
	T:(g.Y),R:(g.X+n.w),B:(g.Y+n.h),L:(g.X)}
;
	if(m.search("repeat-")!=-1){
	k=m.split("repeat-")[1].toUpperCase();
	i[l[k].b1]=1;
	i[l[k].b2]=n[l[k].d]}
if(i.B>n.H){
	i.B=n.H}
d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"}
else{
	d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"}
}
,figurePercentage:function(d,c,f,a){
	var b,e;
	e=true;
	b=(f=="X");
	switch(a){
	case"left":case"top":d[f]=0;
	break;
	case"center":d[f]=0.5;
	break;
	case"right":case"bottom":d[f]=1;
	break;
	default:if(a.search("%")!=-1){
	d[f]=parseInt(a,10)/100}
else{
	e=false}
}
d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));
	if(d[f]%2===0){
	d[f]++}
return d[f]}
,fixPng:function(c){
	c.style.behavior="none";
	var g,b,f,a,d;
	if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){
	return}
c.isImg=false;
	if(c.nodeName=="IMG"){
	if(c.src.toLowerCase().search(/\.png$/)!=-1){
	c.isImg=true;
	c.style.visibility="hidden"}
else{
	return}
}
else{
	if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){
	return}
}
g=DD_belatedPNG;
	c.vml={
	color:{
}
,image:{
}
}
;
	b={
	shape:{
}
,fill:{
}
}
;
	for(a in c.vml){
	if(c.vml.hasOwnProperty(a)){
	for(d in b){
	if(b.hasOwnProperty(d)){
	f=g.ns+":"+d;
	c.vml[a][d]=document.createElement(f)}
}
c.vml[a].shape.stroked=false;
	c.vml[a].shape.appendChild(c.vml[a].fill);
	c.parentNode.insertBefore(c.vml[a].shape,c)}
}
c.vml.image.shape.fillcolor="none";
	c.vml.image.fill.type="tile";
	c.vml.color.fill.on=false;
	g.attachHandlers(c);
	g.giveLayout(c);
	g.giveLayout(c.offsetParent);
	c.vmlInitiated=true;
	g.applyVML(c)}
}
;
	try{
	document.execCommand("BackgroundImageCache",false,true)}
catch(r){
}
DD_belatedPNG.createVmlNameSpace();
	DD_belatedPNG.createVmlStyleSheet();

JS代码(maxshu.js):

// JavaScript Document$(function(){
	/* $(".fan_moon").addClass("animated zoomInUp").show();
	*/
$(".fan_name").addClass("animated fadeInLeftBig").show();
	setTimeout(function(){
	$(".fan_people").addClass("animated tada").show();
}
,1000);
	setTimeout(function(){
	$(".fan_gg_logo").addClass("animated bounceInRight").show();
}
,1400);
	setTimeout(function(){
	$(".fan_Tables").addClass("animated bounceInRight").show();
}
,1800);
	setTimeout(function(){
	$(".fan_gb").addClass("animated rubberBand").show();
}
,2200);
	setTimeout(function(){
	$(".fan_gg_text").addClass("animated bounceInRight").show();
}
,2600);
	setTimeout(function(){
	$(".fan_job").addClass("animated zoomInDown").show();
}
,3000);
	setTimeout(function(){
	$(".fan_want2").addClass("animated bounceInRight").show();
}
,3400);
	setTimeout(function(){
	$(".fan_free").addClass("animated zoomInDown").show();
}
,3800);
	setTimeout(function(){
	$(".fan_text").addClass("animated bounceInRight").show();
}
,4200);
	/*setTimeout(function(){
	$(".fan_Tables").addClass("animated rubberBand").show();
}
,3500);
	*/
/*鐐瑰嚮鎹㈠浘*/
/*$(".fan_people ").hover(function(){
	$(".fan_people ").addClass("fan_people2 ");
}
);
	*/
$(".fan_people ").mouseleave(function(){
	$(".fan_people ").removeClass("fan_people2");
}
);
	$(".fan_netMod ").hover(function(){
	$(".fan_netMod ").addClass("fan_netMod2 ");
}
);
	$(".fan_netMod ").mouseleave(function(){
	$(".fan_netMod ").removeClass("fan_netMod2");
}
);
	$(".fan_shareMod ").hover(function(){
	$(".fan_shareMod ").addClass("fan_shareMod2 ");
}
);
	$(".fan_shareMod ").mouseleave(function(){
	$(".fan_shareMod ").removeClass("fan_shareMod2");
}
);
}
)

CSS代码(style.css):

@charset "utf-8";/*public*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;font-family:"寰蒋闆呴粦";}
body{line-height:1;font-family:"寰蒋闆呴粦";}
section,article,aside,header,footer,nav,dialog,figure{display:block;}
figure{margin:0;}
hr,button,input,textarea{margin:0;padding:0;}
button,input,select,textarea{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover,a:focus{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
table{border-collapse:collapse;border-spacing:0;}
/* ie6 background img*/
*html{zoom:expression(function(ele){ele.style.zoom = "1";document.execCommand("BackgroundImageCache",false,true)}
(this))}
/* font */
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
/* generic */
input[type=submit]{cursor:pointer;}
button{cursor:pointer;}
strong,b{font-weight:bold;}
/* common */
a{color:#333;}
a:hover,a{text-decoration:none;}
h1{font-size:22px;}
h2{font-size:20px;}
h3{font-size:18px;}
h4{font-size:16px;}
h5{font-size:14px;}
h6{font-size:12px;}
.clear{clear:both;width:100%;height:1px;overflow:hidden;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{zoom:1;/* for IE6 IE7 */
}
/* fan_banner */
.fan_banner{background:url(../img/b4_bg.png);height:586px;overflow:hidden;}
.bannBg_all{height:584px;position:relative;}
.bannerCont{width:1200px;margin:0 auto;position:relative;height:588px;}
.fan_Tables,.b4_r_bg,.fan_people,.fan_name,.fan_gg_text,.fan_job,.fan_gg_logo,.fan_gb,.fan_want2,.fan_free,.fan_text{display:none;position:absolute;}
.fan_Tables{background:url(../img/b4_r_bg.png);width:370px;height:114px;position:absolute;top:150px;right:5px;}
.fan_gb{background:url(../img/gb.png);width:243px;height:54px;position:absolute;top:180px;right:70px;}
.fan_people{background:url(../img/people.png);width:208px;height:334px;bottom:15px;left:680px;z-index:1;}
.fan_name{width:705px;height:523px;top:30px;left:0px;}
.fan_gg_text{width:105px;height:55px;position:absolute;top:280px;right:200px;}
.fan_gg_logo{width:272px;height:70px;position:absolute;top:25px;right:0px;}
.fan_job{position:absolute;top:260px;right:0px;}
.fan_free{position:absolute;top:350px;right:0px;}
.fan_want2{width:105px;height:55px;position:absolute;top:360px;right:200px;}
.fan_text{width:328px;height:83px;position:absolute;top:450px;right:0px;}

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