运动框架之使用,缩放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>

 

 

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

 

 

发布了201 篇原创文章 · 获赞 13 · 访问量 4万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览