EonerCMS——做一个仿桌面系统的CMS（十四）

　　这次的功能不用我介绍，是的，就是要做那个win7下窗口超级预览的功能。为了方便，我就做个demo来演示，就不用图里的例子来做讲解了。

　　首先，我们必须知道transform，它是CSS3中的新增属性，这次我们要用到的就是：transform:scale()。这里要提一点注意，scale()是不影响layout的，也就是scale()仅仅是视觉上效果不一样，实际的样式都是不变的，而且scale()的缩放是以中心缩放的，这就会造成一个浮动元素缩放后top、right、bottom、left在视觉上有偏移。

　　具体我们还是来看下demo吧，演示界面是这个样子的

　　右下角的蓝色层是可以拖动改变大小的，方便大家调整不同尺寸来展示超级预览功能，而左上角的“hover me”则是实现鼠标触发焦点显示出预览图的功能。代码不多，如下

　　CSS

.tip{background-color:#ccc;width:180px;height:100px;display:none;position:relative;top:40px;left:40px}
.demo{background-color:blue;width:200px;height:300px;position:absolute;top:150px;left:350px}
.drag{position:absolute;right:0;bottom:0;width:10px;height:10px;background:red;cursor:nw-resize}

　　JS

$().ready(function(){
    $('a').hover(function(){
        //获得当前窗口的宽高
        w = $('.demo').width();
        h = $('.demo').height();
        //计算left、top偏移量，保证超级预览中的缩略图始终居中
        l = (w-180)/2*-1;
        t = (h-100)/2*-1;
        //计算缩放大小
        if(w / h >= 1.8){
            scale = 144/w;
        }else{
            scale = 80/h;
        }
        $('.demo').clone().appendTo('.tip').addClass('transform-scale');
        $('.transform-scale').css({
            w,
            height:h,
            left:l,
            top:t,
            '-webkit-transform':'scale('+scale+')',
            '-moz-transform':'scale('+scale+')',
            '-o-transform':'scale('+scale+')',
            '-ms-transform':'scale('+scale+')'
        });
        $('.tip').fadeIn();
    },function(){
        $('.tip').hide().children().remove();
    });
    
    //改变窗口大小
    $('.drag').on('mousedown',function(e){
        cy = e.clientY;
        cx = e.clientX;
        h = $('.demo').height();
        w = $('.demo').width();
        $(window).on('mousemove',function(e){
            _t = e.clientY;
            _l = e.clientX;
            $('.demo').css({(w-cx+_l)+"px"}).css({height:(h-cy+_t)+"px"});
        }).on('mouseup',function(){
            $(this).off('mousemove');
        });
    });
});

　　HTML

<a href="###">hover me</a>
<div class="tip"></div>
<div class="demo">
    <div class="drag"></div>
</div>

　　整体的思路就是，当在触发焦点时，复制一份蓝色窗口到预览区，通过计算得出缩放比，以保证预览图的大小不会超出预览区，然后就是上面有提到过的，因为缩放不会改变layout，仅仅是视觉效果，所以为了保证缩放后预览图能居中在预览区，我还计算了left、top的偏移量，最终效果就出来了，改变窗口大小后，能实时进行预览。

　　源码下载：点击下载

　　扩展阅读：《背景半透明最佳实践》

　　PS：昨天在闲逛时居然发现了这篇文章，真是对我莫大的支持啊，传送门