jQueryを使ってページを読み込んでdivをズームする方法は？

ページが読み込まれたときにdivをズームインする方法はありますか？ Chromeで新しいアプリをインストールする場合と同様に、新しいタブページに移動して新しいアプリを拡大表示します。良い感じ。jQueryを使ってページを読み込んでdivをズームする方法は？

誰でもjQueryでこれを行う方法を知っていますか？

出典

2011-08-16 Nathan

はここにあなたのCSSでjQueryを使って（top & leftでオフセットと位置）

example jsfiddle

セット開始サイズを拡大する一つの方法です：jQueryを使って

#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; 
}

その後、サイズすべてをバックアップ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

' '要素を使用すると、ズームしながら画像のサイズを変更できます。この[example fiddle]（http：// jsfiddle .net/pxfunc/D7cn8/6 /）の幅を '100％'に設定することで、CSS3では 'background-size'を' 100％ 'に設定することもできます。 .net/pxfunc/D7cn8/7 /）どのブラウザがそれをサポートしているかわからない（Chrome 14で動作確認済み） – MikeM

ありがとう。実際にはすでに「」ですが、背景画像はあります。その理由は、ユーザーが右クリックして保存しようとすると、実際のイメージの代わりに 'blank.gif'が保存されるからです。悲しいことに、IE 8ユーザーがサイトを閲覧する可能性が高いため、通常の「」に変更するだけです。私は、IEが通常のブラウザのようなものすべてをCSSに準拠させることができればと思います。とにかく、ありがとうございました。これは、サイトが本当に良く見えるようにします。ちなみに、サイトはhttp://weebuild1.yolasite.com/です。私がズームインしているイメージはモニターです。 – Nathan

あなたはたぶんjQueryのためのズームプラグインがある...など、テキストサイズを大きく、画像のように、ズームアップするためにすべてのものDIV内

が必要になります。

出典

2011-08-16 03:46:29 avetarman

CSS：（JQueryUI付き）

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

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

はJQuery：期間とhttp://jsfiddle.net/tjRvn/

残念ながらaddClass()は今夜Chromeで動作していない。ここで

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

はデモです。奇妙なもの：/

出典

2011-08-16 03:58:37 AlienWebguy

jQueryを使ってページを読み込んでdivをズームする方法は？

答えて

関連する問題