jquery背景动画全屏焦点图js代码

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

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

以下是 jquery背景动画全屏焦点图js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0.23, minimum-scale=0.23,user-scalable=yes">
<title>jquery背景动画个性全屏焦点图</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css" media="all">
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/zzsc.js"></script>
</head>
<body>
<div id="wrap">
  <div id="head">
    <div class="kvBox">
            <b class="slog_1"></b><b class="slog_2"></b><b class="slog_3"></b><b class="slog_4"></b>
            <b class="gif_1"></b><b class="gif_2"></b>
            <b class="person"></b>
            <b class="air"></b>
            <b class="cloud"></b>
        </div>

  </div>  
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

JS代码(zzsc.js):

function kvFn(){
	$(".kvBox .slog_1").animate({
	top:63}
,{
	duration:1000,easing:"swing",complete:function(){
	gifFn();
}
}
);
	$(".kvBox .slog_2").animate({
	top:128}
,{
	duration:1100,easing:"swing",complete:function(){
}
}
);
	$(".kvBox .slog_3").animate({
	top:179}
,{
	duration:1200,easing:"swing",complete:function(){
}
}
);
	$(".kvBox .slog_4").animate({
	top:252}
,{
	duration:1300,easing:"swing",complete:function(){
}
}
);
	var gifFn = function(){
	$(".kvBox .gif_1").animate({
	width:86}
,500,function(){
	$(".kvBox .gif_2").animate({
	width:86}
,500,function(){
	setTimeout(function(){
	$(".kvBox .gif_2").animate({
	width:0}
,500,function(){
	$(".kvBox .gif_1").animate({
	width:0}
);
}
);
}
,3000)}
);
}
);
}
;
	var timer = setInterval(function(){
	gifFn();
}
,6000);
	//云朵 var _xy = "10px 0",x=0;
	setInterval(function(){
	x = x + 0.5;
	_xy = x + "px 0";
	$(".kvBox .cloud").css({
	backgroundPosition:_xy}
);
}
,13);
	//飞机 setTimeout(function(){
	$(".kvBox .air").animate({
	left:1060,top:40}
,1000,'swing');
}
,1500);
	//人 setTimeout(function(){
	$(".kvBox .person").animate({
	left:0,top:0}
,1000,'swing');
}
,100);
}
$(function(){
	kvFn();
}
)/*jquery easing*/
jQuery.easing['jswing']=jQuery.easing['swing'];
	jQuery.extend(jQuery.easing,{
	def:'easeOutQuad',swing:function(x,t,b,c,d){
	return jQuery.easing[jQuery.easing.def](x,t,b,c,d)}
,easeInQuad:function(x,t,b,c,d){
	return c*(t/=d)*t+b}
,easeOutQuad:function(x,t,b,c,d){
	return-c*(t/=d)*(t-2)+b}
,easeInOutQuad:function(x,t,b,c,d){
	if((t/=d/2)<1)return c/2*t*t+b;
	return-c/2*((--t)*(t-2)-1)+b}
,easeInCubic:function(x,t,b,c,d){
	return c*(t/=d)*t*t+b}
,easeOutCubic:function(x,t,b,c,d){
	return c*((t=t/d-1)*t*t+1)+b}
,easeInOutCubic:function(x,t,b,c,d){
	if((t/=d/2)<1)return c/2*t*t*t+b;
	return c/2*((t-=2)*t*t+2)+b}
,easeInQuart:function(x,t,b,c,d){
	return c*(t/=d)*t*t*t+b}
,easeOutQuart:function(x,t,b,c,d){
	return-c*((t=t/d-1)*t*t*t-1)+b}
,easeInOutQuart:function(x,t,b,c,d){
	if((t/=d/2)<1)return c/2*t*t*t*t+b;
	return-c/2*((t-=2)*t*t*t-2)+b}
,easeInQuint:function(x,t,b,c,d){
	return c*(t/=d)*t*t*t*t+b}
,easeOutQuint:function(x,t,b,c,d){
	return c*((t=t/d-1)*t*t*t*t+1)+b}
,easeInOutQuint:function(x,t,b,c,d){
	if((t/=d/2)<1)return c/2*t*t*t*t*t+b;
	return c/2*((t-=2)*t*t*t*t+2)+b}
,easeInSine:function(x,t,b,c,d){
	return-c*Math.cos(t/d*(Math.PI/2))+c+b}
,easeOutSine:function(x,t,b,c,d){
	return c*Math.sin(t/d*(Math.PI/2))+b}
,easeInOutSine:function(x,t,b,c,d){
	return-c/2*(Math.cos(Math.PI*t/d)-1)+b}
,easeInExpo:function(x,t,b,c,d){
	return(t==0)?b:c*Math.pow(2,10*(t/d-1))+b}
,easeOutExpo:function(x,t,b,c,d){
	return(t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b}
,easeInOutExpo:function(x,t,b,c,d){
	if(t==0)return b;
	if(t==d)return b+c;
	if((t/=d/2)<1)return c/2*Math.pow(2,10*(t-1))+b;
	return c/2*(-Math.pow(2,-10*--t)+2)+b}
,easeInCirc:function(x,t,b,c,d){
	return-c*(Math.sqrt(1-(t/=d)*t)-1)+b}
,easeOutCirc:function(x,t,b,c,d){
	return c*Math.sqrt(1-(t=t/d-1)*t)+b}
,easeInOutCirc:function(x,t,b,c,d){
	if((t/=d/2)<1)return-c/2*(Math.sqrt(1-t*t)-1)+b;
	return c/2*(Math.sqrt(1-(t-=2)*t)+1)+b}
,easeInElastic:function(x,t,b,c,d){
	var s=1.70158;
	var p=0;
	var a=c;
	if(t==0)return b;
	if((t/=d)==1)return b+c;
	if(!p)p=d*.3;
	if(a<Math.abs(c)){
	a=c;
	var s=p/4}
else var s=p/(2*Math.PI)*Math.asin(c/a);
	return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b}
,easeOutElastic:function(x,t,b,c,d){
	var s=1.70158;
	var p=0;
	var a=c;
	if(t==0)return b;
	if((t/=d)==1)return b+c;
	if(!p)p=d*.3;
	if(a<Math.abs(c)){
	a=c;
	var s=p/4}
else var s=p/(2*Math.PI)*Math.asin(c/a);
	return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b}
,easeInOutElastic:function(x,t,b,c,d){
	var s=1.70158;
	var p=0;
	var a=c;
	if(t==0)return b;
	if((t/=d/2)==2)return b+c;
	if(!p)p=d*(.3*1.5);
	if(a<Math.abs(c)){
	a=c;
	var s=p/4}
else var s=p/(2*Math.PI)*Math.asin(c/a);
	if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;
	return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b}
,easeInBack:function(x,t,b,c,d,s){
	if(s==undefined)s=1.70158;
	return c*(t/=d)*t*((s+1)*t-s)+b}
,easeOutBack:function(x,t,b,c,d,s){
	if(s==undefined)s=1.70158;
	return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b}
,easeInOutBack:function(x,t,b,c,d,s){
	if(s==undefined)s=1.70158;
	if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;
	return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b}
,easeInBounce:function(x,t,b,c,d){
	return c-jQuery.easing.easeOutBounce(x,d-t,0,c,d)+b}
,easeOutBounce:function(x,t,b,c,d){
	if((t/=d)<(1/2.75)){
	return c*(7.5625*t*t)+b}
else if(t<(2/2.75)){
	return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b}
else if(t<(2.5/2.75)){
	return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b}
else{
	return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b}
}
,easeInOutBounce:function(x,t,b,c,d){
	if(t<d/2)return jQuery.easing.easeInBounce(x,t*2,0,c,d)*.5+b;
	return jQuery.easing.easeOutBounce(x,t*2-d,0,c,d)*.5+c*.5+b}
}
);

CSS代码(zzsc.css):

@charset"utf-8";/* @Reset */
html{margin:0 auto;padding:0;height:100%;overflow-x:hidden;}
body{margin:0 auto;padding:0;width:100%;font-size:12px;}
*{margin:0;padding:0;outline:none;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,a,p,blockquote,th,td{margin:0;padding:0;vertical-align:baseline;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul,li{list-style:none;vertical-align:top;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
img{border:0;}
/* @HTML5 */
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,div,summary,mark{display:block;}
/* @Global */
*{font-weight:normal;font-style:normal;}
/*banner*/
#head{position:relative;}
.kvBox{position:absolute;left:50%;top:0;width:1580px;margin-left:-790px;overflow:hidden;height:350px;background:url("../img/kv_bg.jpg") no-repeat 50% 0;}
.kvBox .slog_1{position:absolute;z-index:2;left:221px;top:63px;top:1000px;width:219px;height:47px;background:url(../img/kv_img_01.gif) no-repeat 0 0;}
.kvBox .slog_2{position:absolute;z-index:2;left:221px;top:128px;top:1000px;width:361px;height:45px;background:url(../img/kv_img_02.png) no-repeat 0 0;}
.kvBox .slog_3{position:absolute;z-index:2;left:221px;top:179px;top:1000px;width:236px;height:67px;background:url(../img/kv_img_03.png) no-repeat 0 0;}
.kvBox .slog_4{position:absolute;z-index:2;left:221px;top:252px;top:1000px;width:359px;height:44px;background:url(../img/kv_img_04.png) no-repeat 0 0;}
.kvBox .gif_1{position:absolute;z-index:2;left:583px;top:238px;width:86px;width:0;height:57px;background:url(../img/kv_gif_1.png) no-repeat 0 0;}
.kvBox .gif_2{position:absolute;z-index:2;left:583px;top:238px;width:86px;width:0;height:57px;background:url(../img/kv_gif_2.png) no-repeat 0 0;}
.kvBox .person{position:absolute;z-index:4;left:0px;top:0px;left:50px;top:20px;width:100%;height:100%;background:url(../img/kv_person.png) no-repeat 0 0;}
.kvBox .air{position:absolute;z-index:0;left:1060px;top:90px;left:440px;top:440px;width:126px;height:99px;background:url(../img/kv_air.png) no-repeat 0 0;}
.kvBox .cloud{position:absolute;z-index:1;left:0px;top:0px;width:100%;height:100%;background:url(../img/kv_cloud.png) repeat-x 0 0;}

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