JS Motion-zoom in and out of objects (from center)

First look at the effect:

Points:

1. Change the CSS float position to the absolute location with JS

2. Zoom in and out of objects from the center

Main steps:

1. First through the CSS float positioning, the UL width is set to Li width of a multiple (example Li's width is 122, no line shows 3 Li, so the UL width set to 366)

2. Use JS to get and set their initial left and top values

3. UL position:relative relative positioning, followed by JS Loop set Li's Position:absolute absolute positioning

4. Add mouse to move out event and zoom out with motion frame

5. Major level issues when objects are magnified

<ul id= "Ullist" >    <li></li>    <li></li>    <li></li>    <li ></li>    <li></li>    <li></li>    <li></li>    <li> </li>    <li></li></ul>

<style>        *{padding:0;margin:0;}        #ulList {            position:relative;            width:366px;margin:0 auto;        }        #ulList li{           list-style:none;width:100px;height:100px;            Background: #c00;            border:1px solid black;            Float:left;            margin:10px;        } </style>

<script src= "Move.js" ></script><script> window.onload = function () {var Oul = Document.getel        Ementbyid (' ullist ');        var aLi = oul.getelementsbytagname (' li ');        var i=0;        var initzindex = 2; /* Note that there must be two for loops here, first adding the left and top values to each Li, in order to make their position=absolute, if a for will cause all li to overlap */for (i=0;i<ali.length;i++)            {ali[i].style.left = ali[i].offsetleft + ' px ';        Ali[i].style.top = ali[i].offsettop + ' px ';            } for (i=0;i<ali.length;i++) {ali[i].style.position = ' absolute ';            Because the value obtained above Ali[i].offsetleft itself already includes the value of margin, it is necessary to place the style in margin 0 ali[i].style.margin = ' 0 ';                Ali[i].onmousemove = function () {this.style.zIndex = initzindex++;            Startmove (this,{width:200,height:200,marginleft:-50,margintop:-50}); } ali[i].onmouseout = function () {Startmove (this,{width:100,height:100,marginleft:0,margintop: 0});           }}}/* Zoom in from the Center: Change the object's Margin-left and margin-top values while changing the width of the objects, with the changed width 200 minus the width before the change 100 then divide by 2 to get the * margin -left should change the value, because to enlarge, so margin-left is negative, margin-top the same reason * */</script>

The following is the complete code for the Move.js introduced

/** * Created by ZJ on 18/5/2015. */function GetStyle (obj,attr) {return window.getcomputedstyle? window.getComputedStyle (Obj,false) [attr]: OBJ.CURRENTSTYLE[ATTR];}    function Startmove (OBJ,JSON,FN) {clearinterval (Obj.timer);        Obj.timer = setinterval (function () {var bstop = true;            For (attr in JSON) {//1. Gets the current value (can be a value of widht,height,opacity, etc.) var objattr = 0;            if (attr = = "Opacity") {objattr = Math.Round (parsefloat (GetStyle)) obj,attr);            }else{objattr = parseint (GetStyle (obj,attr));            }//2. Calculate the movement speed var ispeed = (Json[attr]-objattr)/10; Ispeed = ispeed>0?            Math.ceil (ispeed): Math.floor (Ispeed); 3.            Detects if all movements reach the target if (objattr! = Json[attr]) {bstop = false;                } if (attr = = "Opacity") {Obj.style.filter = ' alpha (opacity: ' + (objattr+ispeed) + ') '; Obj.style.opacity = (Objattr+ispeed)/100; }else{obj.style[attr] = objattr+ispeed+ ' px ';//need to change the form of the property name to []}} if (bstop) {//            Indicates that all movements reach the target value clearinterval (Obj.timer);            if (FN) {fn (); }}},10);}

The above is all the test code, below the magnification of the hierarchical problem explained:

When the mouse is moved in, the picture zooms in from the center, moves out of the restore, appears the picture level question, enlarges the picture to be obviously covered by other pictures. To solve this problem, first define an initial minimum var mixzindex = 2, and then move the mouse back, so that the current Li's Z-index equals mixzindex++, so that the li that the mouse moves in, its level is always higher than the other Li levels

This.style.zIndex = initzindex++;

JS Motion-zoom in and out of objects (from center)