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({
            width: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({width:(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：昨天在閑逛時居然發現了這篇文章，真是對我莫大的支持啊，傳送門