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

前端技术 2023/09/03 JavaScript

本文实例讲述了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=\"http://www.phpstudy.net\" 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=\"http://www.phpstudy.net\" 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=\"http://www.phpstudy.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\" 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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/8715

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案