JS运动-放大缩小物体(从中心)

先来看下效果：

要点：

1. 将css的float定位，转换成用js的绝对定位

2. 从中心放大缩小物体

主要步骤：

1. 先通过css的float定位，ul宽度设置成li宽的倍数（例子中li的宽是122，没行显示3 个li，所以ul宽设置        成366）

2.  利用js 获取并且设置他们初始的left 和top值

3.  ul 的position：relative相对定位，接着用js循环设置li的position：absolute绝对定位

4.  加入鼠标移入移出事件，并通过运动框架 达到放大缩小的效果

5.  物体放大的时候，主要层级问题

<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.getElementById('ulList');
        var aLi = oUl.getElementsByTagName('li');
        var i=0;
        var initzIndex = 2;
        /*注意这里必须用两个for循环，首先给每个li添加了left和top值，在使他们的position=absolute，如果用一个for就会使所有li重叠在一起*/
        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';
            // 因为上面aLi[i].offsetLeft获取的值本身就已经包括了margin的值，所以这里需要将style里margin清零
            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});
            }

        }
    }
    /*从中心放大要点：改变物体宽高的同时改变物体的margin-left和margin-top值，用改变后的宽200 减去 改变之前的宽100 然后除以2 就得到
    * margin-left 应该改变的值，因为要放大，所以margin-left是负值，margin-top同样的道理
    * */
</script>

下面是引入的move.js 的完整代码

/**
 * 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. 取得当前的值（可以是widht，height，opacity等的值）
            var objAttr = 0;
            if(attr == "opacity"){
                objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
            }else{
                objAttr = parseInt(getStyle(obj,attr));
            }
            // 2.计算运动速度
            var iSpeed = (json[attr] -objAttr)/10;
            iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
            // 3. 检测所有运动是否到达目标
            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';// 需要又.属性名的形式改成[]
            }
        }
        if(bStop){ // 表示所有运动都到达目标值
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
        }
    },10);
}

上面是全部的测试代码，下面对放大时的层级问题解释一下：

当鼠标移入，图片从中心放大，移出还原，出现图片层级问题，放大后图片明显被其他图片覆盖了。为了解决这个问题首先定义一个初始最小的  var  mixzIndex = 2；然后再鼠标移入时，让当前li的z-index 等于mixzIndex++；这样保证鼠标移入的li，它的层级总比其他的li层级高

this.style.zIndex = initzIndex++;