支付宝首页搜索栏淡出效果HTML,jQuery实现仿Alipay支付宝首页全屏焦点图切换特效...

本文实例讲述了jQuery实现仿Alipay支付宝首页全屏焦点图切换特效。分享给大家供大家参考。具体实现方法如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

kinMaxShow 扩展效果

body{ margin:0; padding:0;}

#Login{ position:relative;}

#loginPlane{

position:absolute;width:100%;

height:330px; top:0;

left:0;z-index:88;

}

#loginWrap{

width:960px;margin:0 auto;

padding-top:20px;

}

#loginBox{

width:286px;height:330px;

filter:progid:DXImageTransform.Microsoft.gradient(

startcolorstr=#88000000,endcolorstr=#88000000);

background:rgba(0,0,0,0.2);

float:right; margin-right:20px;

}

#loginBox h3{

border-bottom:1px solid #ccc;

margin:10px; color:#fff;

font-weight:normal; font-size:16px;

line-height:26px;

}

#loginBox form{

color:#fff; font-size:12px;

padding:8px 0 0 20px

}

#loginBox .text{

padding:4px;border:1px solid;

border-color:#aaa #ddd #ddd #aaa;

height:20px; width:230px;

font-family:Verdana

}

#loginBox .submit{

color:#fff; border:0;

background:#FFA600;width:236px;

height:35px; font-weight:bold;

font-family:"Microsoft Yahei";

font-size:14px;

}

#kinMaxShow{ display:none;}

#kinMaxShow .sub_1_1{

display:block; position:absolute;left:110px; top:136px;

}

#kinMaxShow .sub_1_2{

display:block; position:absolute;left:110px; top:120px;

}

#kinMaxShow .sub_2_1{

display:block; position:absolute;left:-160px; bottom:0px;

}

#kinMaxShow .sub_2_2{

display:block; position:absolute;left:110px; top:20px;

}

#kinMaxShow .sub_3_1{

display:block; position:absolute;right:180px; bottom:0px;

}

#kinMaxShow .sub_3_2{

display:block; position:absolute;left:30px; top:40px;

}

$(function(){

$("#kinMaxShow").kinMaxShow({

height:400,

button:{

showIndex:false,

normal:{background:'url(images/button.png) no-repeat -14px 0',

marginRight:'8px',border:'0',right:'44%',bottom:'20px'

},

focus:{background:'url(images/button.png) no-repeat 0 0',

border:'0'

}

},

callback:function(index,action){

switch(index){

case 0 :

if(action=='fadeIn'){

$(this).find('.sub_1_1').animate({left:'70px'},600)

$(this).find('.sub_1_2').animate({top:'60px'},600)

}else{

$(this).find('.sub_1_1').animate({left:'110px'},600)

$(this).find('.sub_1_2').animate({top:'120px'},600)

};

break;

case 1 :

if(action=='fadeIn'){

$(this).find('.sub_2_1').animate({left:'-100px'},600)

$(this).find('.sub_2_2').animate({top:'60px'},600)

}else{

$(this).find('.sub_2_1').animate({left:'-160px'},600)

$(this).find('.sub_2_2').animate({top:'20px'},600)

};

break;

case 2 :

if(action=='fadeIn'){

$(this).find('.sub_3_1').animate({right:'350px'},600)

$(this).find('.sub_3_2').animate({left:'180px'},600)

}else{

$(this).find('.sub_3_1').animate({right:'180px'},600)

$(this).find('.sub_3_2').animate({left:'30px'},600)

};

break;

}

}

});

});

usemap="#Map_1_2" border="0" />

href="http://www.jb51.net" target="_blank"/>

usemap="#Map_2_2" border="0" />

href="http://www.jb51.net" target="_blank"/>

usemap="#Map_3_2" border="0" />

href="http://www.jb51.net" target="_blank"/>

登陆支付宝

账户名：

登陆密码：

jquery.kinMaxShow-1.1.min.js点击此处本站下载。

希望本文所述对大家的jQuery程序设计有所帮助。

时间： 2015-05-01