本文实例讲述了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 src="images/sub_1_1.png" /> <img 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.jb51.net" target="_blank"/> </map> </div> </div> <div> <img src="images/2.jpg" /> <div> <img src="images/sub_2_1.png" /> <img 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.jb51.net" target="_blank"/> </map> </div> </div> <div> <img src="images/3.jpg" /> <div> <img src="images/sub_3_1.png" /> <img 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.jb51.net" target="_blank"/> </map> </div> </div> </div> <div id="loginPlane"> <div id="loginWrap"> <div id="loginBox"> <h3>登陆支付宝</h3> <form> <label>账户名：</label> <p><input type="text" /></p> <label>登陆密码：</label> <p><input type="password" /></p> <br /> <p><input type="button" value=" 登 陆 " /></p> </form> </div> </div> </div> </div> </body> </html>
jquery.kinMaxShow-1.1.min.js点击此处本站下载。
希望本文所述对大家的jQuery程序设计有所帮助。