Of Stack

jQuery plug in kinMaxShow extends effect usage instances

  • 2020-06-07 03:58:13
  • OfStack

This article illustrates the jQuery plug-in kinMaxShow extension effect usage. Share to everybody for everybody reference. The specific analysis is as follows:

Alipay home page focus graph is the use of kinMaxShow extension effect (alipay used a while ago, do not know now is not this, in addition, Alipay focus graph animation effect is a browser, IE8 and the following browser without animation pure static, only in Google, Firefox and other modern browsers will appear animation.) This is just one small example of the kinMaxShow extension, more effects you can use on your own. The code is as follows:

javascript code: 


<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery.kinMaxShow-1.0.min.js" 
type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 $("#kinMaxShow").kinMaxShow({
 // Set the height of the focus graph ( unit : pixel )  You must set up   Otherwise, use the default values  500
 height:400,
 // Set focus diagram   Button effect 
 button:{
  // The Settings button does not display a numeric index ( The index is also not displayed by default )
  showIndex:false,
  // Button in general   The style is set   . css Writing, 
  // similar jQuery the  $('xxx').css({key:value, ... }) In the css Writing.   
  // [Tip: You can set the transparency   You don't have to differentiate between browsers 
  // system 1 for  opacity . CSS3 Properties are also supported 
  // Such as: set button corners, projection, etc., but IE8 And the following are not supported.]   
  normal:{background:'url(images/button.png) no-repeat -14px 0',
  marginRight:'8px',border:'0',right:'44%',bottom:'20px'},
  // The current focus graph button style   Set, same as above 
  focus:{background:'url(images/button.png) no-repeat 0 0',
  border:'0'
  }
 },
 // Focus graph switch callback, each image fade in and fade out will be called. 
 // And the incoming 2 A parameter (index,action) . 
 //index  Current image index  0 For the first 1 Image, 
 //action  Cut to the   or   Cut out   value :fadeIn or fadeOut
 // Within the function  this Point to the   The current picture container object   Can be used to manipulate elements inside. 
 // The focus graph animation in this example mainly depends on callback The implementation. 
 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>

HTML code: 


<div id="kinMaxShow">
 <div>
 <!-- This is the larger image of the focus diagram, and the image required for the animation element is shown below -->
 <img src="images/demo_extend_images/1.jpg" />
 <!-- If additional content is required within the focus diagram   Need to use 1 a div Wrap it up, 
  As shown below, red div As shown, otherwise kinMaxShow Parse confusion --> 
 <div>
  <img class="sub_1_1" src="images/demo_extend_images/sub_1_1.png"/>
  <img class="sub_1_2" src="images/demo_extend_images/sub_1_2.png"
  usemap="#Map_1_2" border="0" />
 <!-- The local link above the focus diagram here   You don't have to use the image hotzone link, 
  Use common a Link implementation, steal a lazy  (: -->  
  <map name="Map_1_2" id="Map_1_2">
  <area shape="rect" coords="2,96,106,123"
  href="https://www.ofstack.com" target="_blank"/>
  </map>
 </div>
 </div>
 <div>
 <img src="images/demo_extend_images/2.jpg" />
 <div>
  <img class="sub_2_1" src="images/demo_extend_images/sub_2_1.png"/>
  <img class="sub_2_2" src="images/demo_extend_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="https://www.ofstack.com" target="_blank"/>
  </map>  
 </div>  
 </div>
 <div>
 <img src="images/demo_extend_images/3.jpg" />
 <div>
  <img class="sub_3_1" src="images/demo_extend_images/sub_3_1.png"/>
  <img class="sub_3_2" src="images/demo_extend_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="https://www.ofstack.com" target="_blank"/>
  </map>   
 </div>
 </div>
</div>

CSS style: 


<style type="text/css">
#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>

I hope this article has been helpful for your jQuery programming.

Related articles: