这次的功能不用我介绍，是的，就是要做那个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：昨天在闲逛时居然发现了这篇文章，真是对我莫大的支持啊，传送门
本文转自胡尐睿丶博客园博客，原文链接：http://www.cnblogs.com/hooray/archive/2011/12/29/2305654.html，如需转载请自行联系原作者
