如何使用jQuery在頁面加載時縮放div？

有沒有辦法在頁面加載時進行div放大？就像在Chrome中安裝新應用程序一樣，它會將您帶到新標籤頁並放大新應用程序。看起來很好。如何使用jQuery在頁面加載時縮放div？

任何人都知道如何用jQuery做到這一點？

2011-08-16 Nathan

這裏有一個方法在你的CSS與jQuery放大

集開始尺寸（和位置top & left偏移）：

#zoom-box { 
    background: #7d7e7d; 
    background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); 
    border-radius:10px; 
    width:0; 
    height:0; 
    position:relative; 
    top:150px; 
    left:150px; 
    border:solid 4px yellow; 
    font-size:0; 
    line-height:0; 
    vertical-align:middle; 
    text-align:center; 
    color:#fff; 
}

那麼大小的一切了一個jQuery animate()方法

$('#zoom-box').animate({ 
    width:'300px', 
    height:'300px', 
    top:'0', 
    left:'0', 
    'font-size':'50px', 
    'line-height':'300px' 
}, 1000);

來源

2011-08-16 03:55:10 MikeM

哇！這工作完美。謝謝:)有無論如何得到背景圖像來調整它？像這個div有一個背景圖像，它不會調整大小。有什麼我可以添加到，使背景圖像也增長？（它就像已經大小和div只是增長，但它看起來不太好）。 – Nathan

如果您使用''元素，則可以在縮放時調整圖像的大小。請參閱此示例小提琴（http：// jsfiddle .net/pxfunc/D7cn8/6 /）通過設置寬度爲'100％'...並且實際上使用CSS3，您可以將'background-size'設置爲'100％'[示例小提琴]（http：// jsfiddle .net/pxfunc/D7cn8/7 /），但不知道哪些瀏覽器支持（測試/在Chrome 14中工作） – MikeM

謝謝。它實際上已經是一個''，但有一個背景圖像。這是因爲當用戶嘗試右擊並保存時，他們保存'blank.gif'而不是實際的圖像。不幸的是，我可能會將其改爲常規的''，因爲該網站很可能會被IE 8用戶查看。我希望IE瀏覽器可以像常規瀏覽器一樣符合CSS。無論如何，非常感謝您的幫助！這將使該網站真的看起來不錯。順便說一下，該網站是http://weebuild1.yolasite.com/我正在放大的圖像是監視器。 – Nathan

您需要放大的一切DIV中，如圖像，增加文本大小，等等

也許有jQuery的放大插件。

來源

2011-08-16 03:46:29 avetarman

CSS：

div { 
    width:50px; 
    height:50px; 
    margin:20px; 
    background-color:red; 
    font-size:1em; 
} 

.big { 
    width:100px; 
    height:100px; 
    font-size:2em; 
}

JQuery的（與jQueryUI的）：

$(function(){ 
     $('#my_div').addClass("big",500).removeClass("big",500); 
});

這裏的演示：http://jsfiddle.net/tjRvn/

不幸的是addClass()與持續時間無法在Chrome今晚的工作。奇怪：/

來源

2011-08-16 03:58:37 AlienWebguy

如何使用jQuery在頁面加載時縮放div？

回答

相關問題