Home > Article > Web Front-end > jQuery imitates Alipay homepage focus image effect

jQuery imitates Alipay homepage focus image effect

php中世界最好的语言Original: 2018-04-25 17:44:321539browse

This time I will bring you the jQuery imitation Alipay homepage focus image effect. What are the precautions for the jQuery imitation Alipay homepage focus image effect. The following is a practical case, let's take a look.

<!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>
 <p id="Login"> 
 <p id="kinMaxShow">
 <p>
  <img src="images/1.jpg" />
  <p>
  <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>
  </p>
 </p>
 <p>
  <img src="images/2.jpg" />
  <p>
  <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>  
  </p>  
 </p>
 <p>
  <img src="images/3.jpg" />
  <p>
  <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>   
  </p>
 </p>
 </p>
 <p id="loginPlane">
 <p id="loginWrap">
  <p 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>
  </p>
 </p>
 </p>
 </p>
</body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

jQuery imitates Alipay homepage focus image effect

Related articles