jQuery implémente des effets de changement d'image de mise au point plein écran imitant Alipay Alipay homepage

jQuery implémente des effets de changement d'image de mise au point plein écran imitant Alipay Alipay homepage_jquery

WBOY

Libérer： 2016-05-16 16:00:55

original

1056 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation par jQuery de l'effet de changement d'image de mise au point plein écran imitant la page d'accueil d'Alipay. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

<!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.jb51.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.jb51.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.jb51.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>

Copier après la connexion

jquery.kinMaxShow-1.1.min.js cliquez icitélécharger depuis ce site.

J'espère que cet article sera utile à la programmation jQuery de chacun.