jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
本文实例讲述了jQuery实现仿Alipay支付宝首页全屏焦点图切换特效。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>kinMaxShow扩展效果</title> <linktype="text/css"href="_doc/base.css"rel="stylesheet"/> <styletype="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:0auto; 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; } #loginBoxh3{ border-bottom:1pxsolid#ccc; margin:10px;color:#fff; font-weight:normal;font-size:16px; line-height:26px; } #loginBoxform{ color:#fff;font-size:12px; padding:8px0020px } #loginBox.text{ padding:4px;border:1pxsolid; 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:"MicrosoftYahei"; 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> <scriptsrc="js/jquery-1.10.2.min.js"type="text/javascript"></script> <scriptsrc="js/jquery.kinMaxShow-1.1.min.js" type="text/javascript"></script> <scripttype="text/javascript"> $(function(){ $("#kinMaxShow").kinMaxShow({ height:400, button:{ showIndex:false, normal:{background:'url(images/button.png)no-repeat-14px0', marginRight:'8px',border:'0',right:'44%',bottom:'20px' }, focus:{background:'url(images/button.png)no-repeat00', border:'0' } }, callback:function(index,action){ switch(index){ case0: 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; case1: 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; case2: 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> <divid="Login"> <divid="kinMaxShow"> <div> <imgsrc="images/1.jpg"/> <div> <imgclass="sub_1_1"src="images/sub_1_1.png"/> <imgclass="sub_1_2"src="images/sub_1_2.png" usemap="#Map_1_2"border="0"/> <mapname="Map_1_2"id="Map_1_2"> <areashape="rect"coords="2,96,106,123" href="https://www.nhooo.com"target="_blank"/> </map> </div> </div> <div> <imgsrc="images/2.jpg"/> <div> <imgclass="sub_2_1"src="images/sub_2_1.png"/> <imgclass="sub_2_2"src="images/sub_2_2.png" usemap="#Map_2_2"border="0"/> <mapname="Map_2_2"id="Map_2_2"> <areashape="rect"coords="3,97,104,124" href="https://www.nhooo.com"target="_blank"/> </map> </div> </div> <div> <imgsrc="images/3.jpg"/> <div> <imgclass="sub_3_1"src="images/sub_3_1.png"/> <imgclass="sub_3_2"src="images/sub_3_2.png" usemap="#Map_3_2"border="0"/> <mapname="Map_3_2"id="Map_3_2"> <areashape="rect"coords="1,98,106,124" href="https://www.nhooo.com"target="_blank"/> </map> </div> </div> </div> <divid="loginPlane"> <divid="loginWrap"> <divid="loginBox"> <h3>登陆支付宝</h3> <form> <label>账户名:</label> <p><inputtype="text"class="text"/></p> <label>登陆密码:</label> <p><inputtype="password"class="text"/></p> <br/> <p><inputtype="button"value="登陆"class="submit"/></p> </form> </div> </div> </div> </div> </body> </html>
jquery.kinMaxShow-1.1.min.js点击此处本站下载。
希望本文所述对大家的jQuery程序设计有所帮助。