这次的功能不用我介绍,是的,就是要做那个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:昨天在闲逛时居然发现了这篇文章,真是对我莫大的支持啊,传送门