Based on jquery image fragmentation switch effect plugin Fragmentfly

Based on the jquery image fragmentation switch effect plug-in fragmentfly. This is a simple three steps to complete the fragment animation, parameters adjustable, easy to use.

Online preview Source Download

Part of the code:

<Divclass= "All_wrap"><Divclass= "Wrap_head"><DivID= "Fragment_title"></Div></Div><Divclass= "Wrap_middle"><Divclass= "Wrap_middle_head"><ulclass= "Nav_ul"><Li><ahref="#">Instructions for use</a> </Li><Li><ahref="#">Configuration Instructions</a> </Li><Li><ahref="#">Animation simulation</a> </Li><Li><ahref="#">Author&nbsp;<spanclass= "dot">:</span><spanclass= "Ahkari">&nbsp;Ahkari</span></a></Li><Divclass= "Clearfloat"></Div></ul></Div><Divclass= "Wrap_middle_body"><Divclass= "Warp_middle_body_wrap"><Divclass= "Parm_info"><Divclass= "Parm_info_title"ID= "Useinformation"><P>Instructions for use</P></Div><Divclass= "InfoArea"><Pclass= "Heigher">Step one: HTML</P><P>Create an element that uses a background picture</P><Divclass= "Codearea"><Preclass= "brush:html;">                                <!--using the Fragmenfly plugin for Fragment_title -                                <DivID= "Fragment_title">                                </Div>                                </Pre></Div><Pclass= "Heigher">Step two: CSS</P><P>&nbsp;&nbsp;&nbsp;&nbsp;1.&nbsp;&nbsp;This element is set to relative positioning, which facilitates the positioning of the segmented sub-elements.</P><P>&nbsp;&nbsp;&nbsp;&nbsp;2.&nbsp;&nbsp;The wide height is set to coincide with the segmented image, ensuring precise segmentation.</P><Divclass= "Codearea"><Preclass= "BRUSH:CSS;">#fragment_title {/* must be set to relative*/                                        position:relative;                                    /* Width high with the segmented background picture consistent */width:424px;                                height:150px; }                                </Pre></Div><Pclass= "Heigher">Step three: JavaScript</P><P>&nbsp;&nbsp;&nbsp;&nbsp;1.&nbsp;&nbsp;With jquery, you need to import the required files.</P><Divclass= "Codearea"><Preclass= "brush:html;">                                <!--import jquery or have a jquery environment -                                <Scriptsrc=".. /libs/jquery.js "type= "Text/javascript"></Script>                                <!--Import Plugins -                                <Scriptsrc=".. /jquery.fragmentfly.js "type= "Text/javascript"></Script>                                </Pre></Div><P>&nbsp;&nbsp;&nbsp;&nbsp;2.&nbsp;&nbsp;For elements using plug-ins, parameter settings have default values in addition to the picture directory.</P><Divclass= "Codearea"><Preclass= "Brush:javascript;"></Pre></Div><P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The quick configuration is as follows.</P><Divclass= "Codearea"><Preclass= "Brush:javascript;">/ * Quick Config */$ ("#fragment_title"). Fragmentfly ({image_url: ".                                /img/title.png "},{}"; </Pre></Div></Div>

via:http://www.w2bc.com/article/32746

Based on jquery image fragmentation switch effect plugin Fragmentfly