jQuery实现仿Alipay支付宝首页全屏焦点图切换特效

2024-05-06 16:19:18

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了jQuery实现仿Alipay支付宝首页全屏焦点图切换特效,涉及jQuery插件jquery.kinMaxShow的相关使用技巧,非常具有实用价值,需要的朋友可以参考下

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

<!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>kinMaxShow 扩展效果</title>

<link type="text/css" href="_doc/base.css" rel="stylesheet" />

<style type="text/css">

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;

}

</style>

<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>

<script src="js/jquery.kinMaxShow-1.1.min.js"

type="text/javascript"></script>

<script type="text/javascript">

$(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;

}

}

});

});

</script>

</head>

<body>

<div id="Login">

<div id="kinMaxShow">

<div>

<img src="images/1.jpg" />

<div>

<img class="sub_1_1" src="images/sub_1_1.png" />

<img class="sub_1_2" src="images/sub_1_2.png"

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

<map name="Map_1_2" id="Map_1_2">

<area shape="rect" coords="2,96,106,123"

href="http://www.vevb.com" target="_blank"/>

</map>

</div>

</div>

<div>

<img src="images/2.jpg" />

<div>

<img class="sub_2_1" src="images/sub_2_1.png" />

<img class="sub_2_2" src="images/sub_2_2.png"

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

<map name="Map_2_2" id="Map_2_2">

<area shape="rect" coords="3,97,104,124"

href="http://www.vevb.com" target="_blank"/>

</map>

</div>

</div>

<div>

<img src="images/3.jpg" />

<div>

<img class="sub_3_1" src="images/sub_3_1.png" />

<img class="sub_3_2" src="images/sub_3_2.png"

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

<map name="Map_3_2" id="Map_3_2">

<area shape="rect" coords="1,98,106,124"

href="http://www.vevb.com" target="_blank"/>

</map>

</div>

</div>

</div>

<div id="loginPlane">

<div id="loginWrap">

<div id="loginBox">

<h3>登陆支付宝</h3>

<form>

<label>账户名：</label>

<p><input type="text" class="text" /></p>

<label>登陆密码：</label>

<p><input type="password" class="text" /></p>

<br />

<p><input type="button" value=" 登陆 " class="submit" /></p>

</form>

</div>

</div>

</div>

</div>

</body>

</html>