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

2019-11-20 12:33:28

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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="//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="//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="//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>

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

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

上一篇：jquery实现的美女拼图游戏实例

下一篇：jQuery插件kinMaxShow扩展效果用法实例