<!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> <p id="login"> <p id="kinmaxshow"> <p> <img src="images/1.jpg" /> <p> <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.jb51.net" target="_blank"/> </map> </p> </p> <p> <img src="images/2.jpg" /> <p> <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.jb51.net" target="_blank"/> </map> </p> </p> <p> <img src="images/3.jpg" /> <p> <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.jb51.net" target="_blank"/> </map> </p> </p> </p> <p id="loginplane"> <p id="loginwrap"> <p 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> </p> </p> </p> </p> </body> </html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
json与xml使用详解
jsonp+json实现ajax跨域请求
以上就是jquery仿支付宝首页焦点图效果的详细内容。