运动框架之使用，缩放1

上一篇我用css3 写了个缩放的功能，这次我们用js 写！

 

上面是布局，

 

我们来看下代码

我们发现坐标刚好就是我们要定位时的坐标，为了防止布局出现错误

我们采取，先给每个元素设置好，

left 和top,然后统一将浮动的元素，转成定位！

 

但是定位时，要去掉margin 值，因为你的定位坐标已经包含了margin

如果定位后，还加margin ,此时margin 值仍然会起作用，就重复了， 所以要去掉！

 

第一步的布局转换就完毕了，下一步就是当悬浮的时候，放大，沿着中心点放到！

 

 

 // 当页面加载完毕的时候，我们在这里写代码！
        window.onload = function(){
            var zIndex = 2;
            var oBox = document.getElementById('box');
            var aLis = oBox.getElementsByTagName('li');
            var w = aLis[0].offsetWidth;
            var h = aLis[0].offsetHeight;

            for(var i =0; i<aLis.length;i++){
                var left = aLis[i].offsetLeft;
                var top = aLis[i].offsetTop;
                // 一次性就能得到 li的定位坐标，很溜
                aLis[i].style.left = left + 'px';
                aLis[i].style.top = top + 'px';
                aLis[i].c = {
                    left,top
                };
                
            }
            for(var i =0; i<aLis.length;i++){
                
                aLis[i].style.position = 'absolute';
                aLis[i].style.margin = '0';
            }
            for(var i =0; i<aLis.length;i++){
               
             
                aLis[i].onmouseover = function(){
                   
                   var rLeft  = this.c.left - this.offsetWidth/2;
                   var rTop = this.c.top - this.offsetHeight/2;
                   // 1, 先向上向左移动自身宽度的一半！
                   // 2, 然后宽高放大一倍！
                   // 3， 这个时候就需要用到万能框架！
                   startMove(this,{
                       left:rLeft,
                       top:rTop,
                       width:w*2,
                       height:h*2
                   });
                   this.style.zIndex = zIndex++;
               }
               aLis[i].onmouseout = function(){
                startMove(this,{
                       width:w,
                       height:h,
                       left:this.c.left,
                       top:this.c.top
                   });
               }

           }
        }
    </script>

 

上面的代码用到了，完美运动框架：

/**
 * @author miaov
 */
function getStyle(obj, attr)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[attr];
	}
	else
	{
		return getComputedStyle(obj, false)[attr];
	}
}

function startMove(obj, json, fn)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function (){
		var bStop=true;		
		for(var attr in json)
		{

			var iCur=0;
			
			if(attr=='opacity')
			{
				iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
			}
			else
			{
				iCur=parseInt(getStyle(obj, attr));
			}
			
		
			var iSpeed=(json[attr]-iCur)/8;
			iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
			
		
			if(iCur!=json[attr])
			{
				bStop=false;
			}
			
			if(attr=='opacity')
			{
				obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
				obj.style.opacity=(iCur+iSpeed)/100;
			}
			else
			{
				obj.style[attr]=iCur+iSpeed+'px';
			}
		}
		
		if(bStop)
		{
			clearInterval(obj.timer);
			
			if(fn)
			{
				fn();
			}
		}
	}, 30)
}

 

 

使用的时候，只要将坐标点，传对，基本这个程序就没问题了，

 

放到的时候， left top 要往右上角去移！

缩小的时候要移回来！

 

 

 

可以发现我写的代码和啰嗦，都这样，菜鸟你写起来也索罗，不信试试

 

为了简化代码，我用marignLeft 代替定位的坐标：

// 当页面加载完毕的时候，我们在这里写代码！
        window.onload = function(){
            var zIndex = 2;
            var oBox = document.getElementById('box');
            var aLis = oBox.getElementsByTagName('li');
            for(var i =0; i<aLis.length;i++){
                var left = aLis[i].offsetLeft;
                var top = aLis[i].offsetTop;
                // 一次性就能得到 li的定位坐标，很溜
                aLis[i].style.left = left + 'px';
                aLis[i].style.top = top + 'px';
            }
            for(var i =0; i<aLis.length;i++){
                
                aLis[i].style.position = 'absolute';
                aLis[i].style.margin = '0';
            }
            for(var i =0; i<aLis.length;i++){
               
             
                aLis[i].onmouseover = function(){
                   startMove(this,{
                       marginLeft:-100,
                       marginTop:-100, 
                       width:400,
                       height:400
                   });
                   this.style.zIndex = zIndex++;
               }
               aLis[i].onmouseout = function(){
                startMove(this,{
                        marginLeft:0,
                       marginTop:0,   
                       width:200,
                       height:200,
                          
                   });
               }

           }
        }
    </script>

 

 

也能实现功能，可见一个功能，可以用不同的方式实现，高手总是会用最简单的！