Taobao, the front of the mouse after using principle is the same as the amplification effects with slides, will implement the code below analysis with you
code is as follows:


<Div class="sub all_t1"
style="width: 160px; height: 160px; background: url (http://img02.taobaocdn.com/imgextra/i2/845309971/T2khnoXihaXXXXXXXX_!!!!! 845309971. Png_160x160. JPG) no - repeat;" >
<Div data - widgets - c data - widgets - type="Popup" class="J_TWidget hidden" >
<Div style="width: 310px; height: 207px; background: url (http://img02.taobaocdn.com/imgextra/i2/845309971/T2khnoXihaXXXXXXXX_!!!!! 845309971. Png_310x310. JPG) no - repeat" ></div>
</div>
</div>

class=" J_TWidget hidden" Taobao is the built-in javascript code control key image attributes, through it to get the div nodes, as well as the control of the node. As for the definition of style is the style, including width, background picture

<Div data - widgets - config=" {' trigger ':' all_t1 ', 'the align: {' node' : 'all_t1', 'offset' : [0, 160], 'points' : [' BC', 'the tc]}} " Data - widgets - type=" Popup" Class=" J_TWidget hidden" >There is no doubt that is a special attribute definition,

node: ‘ The custom ’//reference elements. Popup with reference to locate elements. And contact way,

to class and id selector spelled

points: [tr, tl],///'tl', 'the tr said popup tl aligned with the tr reference node,

specific tl, the meaning and value of tr said screenshot below,

t (top), c (center), b (bottom), l (left), r (right)

offset: [0, 0]//RMS for (n, m], points after alignment, offset value,

generally can be used to fine tune, n and m, respectively aligned two dots

in the x, y coordinates the offset between the


This concludes the body part