jquery plug-ins Kinmaxshow Extended effect usage instances _jquery

This example describes the use of the jquery plug-in kinmaxshow extended effect. Share to everyone for your reference. The specific analysis is as follows:

Alipay Home Focus Map is the use of Kinmaxshow expansion effect (a period of time before Alipay use, do not know now or not this, in addition to pay treasure this focus graph animation effect is the browser, IE8 and the following browser without animation pure static, only in Google, Firefox and other modern browsers will appear animation. This is just a kinmaxshow extension of a small example, more effect you can play 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 Focus chart height (in pixels) must be set otherwise use the default value of height:400,//Set Focus Chart Button effect button:{//Set Press The button does not display the digital index (default is also not display index) Showindex:false,//button general under Style settings, CSS writing,//Like jquery $ (' xxx '). css ({key:value,......})  
  The CSS in the syntax. "Tips: You can set the transparency Oh no need to differentiate browser//Unified for OPACITY,CSS3 properties also support oh//such as: Set button fillet, projection, etc., but IE8 and the following does not support the" Normal:{background: "url (images/butt On.png) no-repeat-14px 0 ', marginright: ' 8px ', border: ' 0 ', right: ' 44% ', bottom: ' 20px '},//Current Focus Chart button style settings, writing ditto Focus:{back
 Ground: ' URL (images/button.png) no-repeat 0 0 ', border: ' 0 '}},//Focus map Toggle callback, each picture fade in, fade out will be called.
 and pass in 2 parameters (Index,action).
 Index 0 of the current picture is the first picture,//action cut in or out the value: Fadein or fadeout//function This points to the current picture container object to be available to manipulate the elements inside.
 In this example, the focus graph animation is mainly achieved by callback. Callback:function (index,action) {switch (index) {CASe 0:if (action== ' FadeIn ') {$ ('. Sub_1_1 '). Animate ({left: ' 70px '},600) $ (a). Find ('. Sub_1_2 '). Animate ({ Top: ' 60px '},600)}else{$ (a). Find ('. Sub_1_1 '). Animate ({left: ' 110px '},600) $ (a). Find ('. Sub_1_2 '). Animate ({
  Top: ' 120px '},600)};
  Break Case 1:if (action== ' FadeIn ') {$ (a). Find ('. Sub_2_1 '). Animate ({left: ' -100px '},600) $ (a). Find ('. Sub_2_2 '). Anima Te ({top: ' 60px '},600)}else{$ (a). Find ('. Sub_2_1 '). Animate ({left: ' -160px '},600) $ (this). Find ('. Sub_2_2 ').
  Animate ({top: ' 20px '},600)};
  Break Case 2:if (action== ' FadeIn ') {$ (a). Find ('. Sub_3_1 '). Animate ({right: ' 350px '},600) $ (a). Find ('. Sub_3_2 '). Anima Te ({left: ' 180px '},600)}else{$ (a). Find ('. Sub_3_1 '). Animate ({right: ' 180px '},600) $ ('. Sub_3_2 ').
  Animate ({left: ' 30px '},600)};   
 Break
}
 }
 });
}); </script>

HTML Code:

<div id= "Kinmaxshow" > <div> <!--This is a large picture of the focus map, the following is the picture required for the animation element-->  <!--if additional content needs to be wrapped in a div inside the focus diagram, as shown in the red div below, Kinmaxshow will parse the chaos--> <div>   <!--the local link above the focus map does not use the picture hot zone link, can be realized by the ordinary a link, steals a lazy (:--> <map name=" Map _1_2 "id=" map_1_2 "> <area shape=" rect "coords=" 2,96,106,123 "href=" http://www.jb51.net "target=" _blank "/>" lt;/map> </div> </div> <div>  <div> & Lt;img class= "Sub_2_1" src= "Images/demo_extend_images/sub_2_1.png"/>  <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>  <div>  <map name= "M
  Ap_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>

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 will help you with your jquery programming.