智能修改窗口的位置
在测试的时候，我发现调整浏览器尺寸后，原先靠近浏览器边缘的窗口就直接被隐藏掉了，如下图：
出现这问题的原因也很简单，因为窗口的top、left的值是写死的，当浏览器的宽高小于窗口top、left时，必然会被隐藏掉。解决办法就是在调整浏览器尺寸的同时，把窗口的top、left也一起修改，但是具体要修改成多少呢？
经过自己的考虑和他人的指点，最终的解决办法就是按比例修改，也就是按当时窗口离左/右、上/下的距离与整个窗口大小的比例进行缩放，说的可能有点迷糊，不如看下修改公式吧：
top = 浏览器缩放前窗口上边距 / ( 浏览器缩放前高度 - 浏览器缩放前窗口高度 ) * ( 浏览器缩放后高度 - 浏览器缩放后窗口高度 );
left = 浏览器缩放前窗口左边距 / ( 浏览器缩放前宽度 - 浏览器缩放前窗口宽度 ) * ( 浏览器缩放后宽度 - 浏览器缩放后窗口宽度 );
公式里我对浏览器的宽高都减去了窗口的宽高，原因就是不管浏览器怎么缩放，窗口的宽高是始终不会变化的，如果不减去窗口的宽高，是无法按比例缩放的。
最终效果如下图：
demo大家应该看到了，试试缩放下浏览器看下效果吧。
我是演示，看完文章后再看我
demo源码，js
$().ready(
function
(){
var
dfw = $(window).width() - $(
"#div1"
).width();
var
dfh = $(window).height() - $(
"#div1"
).height();
var
dl = $(
"#div1"
).offset().left;
var
dt = $(
"#div1"
).offset().top;
$(window).bind(
"resize"
,
function
(){
var
ctw = $(window).width() - $(
"#div1"
).width();
var
cth = $(window).height() - $(
"#div1"
).height();
$(
"#div1"
).css({
"left"
:(dl/dfw*ctw)+
"px"
,
"top"
:(dt/dfh*cth)+
"px"
});
});
});
|
html
<
div
id="div1" style="width:300px;height:30px;line-height:30px;text-align:center;padding:5px;background:red;position:absolute;top:100px;left:100px">我是演示，看完文章后再看我</
div
>
本文转自胡尐睿丶博客园博客，原文链接：
http://www.cnblogs.com/hooray/archive/2011/10/05/2199227.html
，如需转载请自行联系原作者
|
