这次给大家带来jQuery仿支付宝首页焦点图效果，jQuery仿支付宝首页焦点图效果的注意事项有哪些，下面就是实战案例，一起来看一下。
kinMaxShow 扩展效果 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;} $(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; } } });});
登陆支付宝
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
JSON与XML使用详解
jsonp+json实现AJAX跨域请求
以上就是jQuery仿支付宝首页焦点图效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2767839.html
