<script type="text/javascript">
$().ready(function() {
function autoresize() {
$("#main").css({ 'width':"100%"});
var mainw = $("#main").width();
var fixw = Math.floor(mainw/2);
$("#a").css({ 'width' : fixw});
$("#b").css({ 'width' : fixw});
}
/*
先定義一個新function
把主要的DIV CSS 寬度設為100% 即全畫面
定義變數 mainaw 等於 main 的寬度
定義變數 fixw 把 mainaw 除於二
我先這邊先假設你要 左邊跟右邊寬度各一半 ;
在改寫div a 的寬度 數值為 fixw
在改寫圖片的寬度 數值為 fixw
*/
$(window).resize(function () {
autoresize();
});
});
/// 上面是當視窗改變後去呼叫重新計算兩個表格跟圖片的寬度
</script>
<body>
<div id='main'>
<div id='a'></div>
<div><img src='' id='b'></div>
另外一個作法, 直接偵測視窗大小就改變元素css
$(window).resize(function () {
$('#testbrower').text('(目前瀏覽器寬度 : ' + $(window).width() + ' , 目前瀏覽器高度:' + $(window).height() + ' )');
if ($(window).width()<=500 ||$(window).height()<=400) // 如果 視窗寬度小於 500 或是高度 小於400
{
// 這邊寫你要的效果 改寫css 之類的
}
});
我大概就寫這樣
至於怎樣長寬看起來比較協調, 你可能要在自己在寫細緻一點 | 
發表於 2010-11-25 18:09
|