htmlとcssはほんの少しわかりますが、javascriptは目下勉強中の者です。
質問させてください。
ブラウザのウィンドウの大きさに合わせて、ページの背景画像が『拡大・縮小』してくれる様なjavascriptのコードはありませんでしょうか。
自分で調べてみましたが、flashによる処理しかなく、どうにかjavascriptでできないものか悩んでいます。
http://www.ex-yz.com/labo/flash/sample/noscale/s …
上記のページはflashによるものだそうですが、リサイズのイメージはこういったものを実現したいです。
どなたか教えて下さる方がいらっしゃれば、よろしくお願いします。
No.1ベストアンサー
- 回答日時:
面白そうだったので作ってみました。
ちょっとサンプルとは違うけど。。
背景画像そのままだと多分出来ないので、レイヤーを使った感じにしました。
<body>
<img src="43442.jpg" id="backgroundID" style="position:absolute;top:0px;left:0px;z-index:0;" onload="setSize()">
<div style="position:absolute;top:0px;left:0px;z-index:1;">
<script type="text/javascript">
var imgObj = document.getElementById('backgroundID');
var imgSize = {w:0, h:0}
window.onresize = setImg;
window.onscroll = function() {
var t, l;
if (document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
} else if (document.body.scrollTop) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
} else {
return;
}
imgObj.style.top = t + 'px';
imgObj.style.left = l + 'px';
}
function setSize() {
imgSize.w = imgObj.width;
imgSize.h = imgObj.height;
}
function setImg() {
var wh, pW, pH, c;
wh = getWindowSize();
pW = wh.w / imgSize.w;
pH = wh.h / imgSize.h;
if (pW > 0 || pH > 0) {
c = (pW > pH) ? pW : pH;
imgObj.style.width = parseInt(imgSize.w * c + 1) + 'px';
imgObj.style.height = parseInt(imgSize.h * c + 1) + 'px';
} else {
imgObj.style.width = imgSize.w + 'px';
imgObj.style.height = imgSize.h + 'px';
}
}
function getWindowSize() {
var wh = {w:0, h:0};
if (document.body.clientWidth) {
wh.w = document.body.clientWidth
wh.h = document.body.clientHeight;
} else if(document.documentElement.clientWidth) {
wh.w = document.documentElement.clientWidth;
wh.h = document.documentElement.clientHeight;
} else if(window.innerWidth) {
wh.w = window.innerWidth;
wh.h = window.innerHeight;
}
return wh;
}
</script>
<body>タグの直下に上記のようなのを入れる。
</body>タグの直前に</div>を入れれば出来ると思います。
・・・こんなのはどうでしょう?
ちょっと邪道ですが。
本当にありがとうございます。
このソースでうまく動作しましたので、目的が達成できそうです。
>ちょっと邪道ですが。
参考書を見て、Window.innerWidthなどのプロパティも理解でき、大変役にたちました。
ありがとうございました。
No.4
- 回答日時:
こんにちは
背景画像のサイズ変更はできないのでひと工夫いりますが、サイトのようなものでしたらjavascriptを使用しなくてもできそうですね・・・
<style type="text/css"><!--
html,body {
margin:0px;
width:100%;
height:100%;
overflow:hidden;
}
--></style>
<img src="sample1.jpg" style="width:100%;height:100%;position:absolute;top:0px;left:0px;">
<div style="width:600px;height:300px;position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-300px;">
<img src="sample0.jpg" style="width:100%;height:100%;">
</div>
※<div>のmargin-top,margin-left;は<div>のheight,widthの半分の値になります
※順不同で作るのでしたらz-indexコントロールしてください
※ただサイトのように背景画のwidth,heightの最小値設定はできていません
そちらの方はjavascriptを使用することになると思いますが(一応作ってみたのですが)javascriptによるサイズ変更すると拡大するときに画面がパチパチしてとても見づらかったので省きます(良い方法を知っておられる方がいればいいのですが・・・)
回答ありがとうございます。
上記のように試してみた所、二つのサイズのの画像が重なって表示されてしまい、うまくいきませんでした。。
ですが、"1"さんが書いてくださったコードを試して見た所、うまく解決しそうです!ありがとうございます。
No.3
- 回答日時:
<html>
<body>
<img src="hana.gif" style="position:absolute; top:0px;left:0px;" id="b">
<div style="position:absolute; top:0px;left:0px;">
<br>
ここに適当に書いておくれ!<br>
画像の名前を適当にかえて!<br>
</div>
<script>
window.onresize = i;
window.onload =i;
function i(){
o=document.getElementById('b');
o.style.width = document.body.clientWidth;
o.style.height = document.body.clientHeight;
}
</script>
</body></html>
返事が遅くなりました。
これは他の質問サイトで既出でしたので、試してみましたがうまくいきませんでした。
けれど抜け落ちていた部分を補完してくださったのですね。
ありがとうございます。(ですが、やっぱり目的のようには表示されませんでした。)
No.2
- 回答日時:
onload時のを書くのを忘れてました。
イベントの書き方も結構適当に書いちゃったので、もし使うのであればaddEventListenerやら上手く書き換えてください。
この回答への補足
すごい!!すばやい回答ありがとうございます!
早速、挑戦してみたいと思います。
何せjavascriptは完全に初心者なものでして。。
ですので、もし失礼でなければ、欠落部分についても補足して頂けるとありがたいです!
【すいません。。補足欄にお礼を書いてしまいました】
すごい!!すばやい回答ありがとうございます!
早速、挑戦してみたいと思います。
何せjavascriptは完全に初心者なものでして。。
ですので、もし失礼でなければ、欠落部分についても補足して頂けるとありがたいです!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
form内のinputタグのみロックす...
-
TexでΣの添え字の位置直し
-
Javascriptで定期的にF5を押す...
-
ドロップダウンメニューを短縮...
-
<a>タグのテキストを取得
-
関数でy=g(x)のgとは何の略です...
-
VSCODE[Python]の設定について
-
Linux バイナリ実行できない "...
-
オブジェクト指向のsetTimeout...
-
javascriptで行を抽出したいです。
-
JavaScript/HTML5での図形の描写
-
Boolean型配列中のTrueの有無を...
-
Google Apps Script で添付ファ...
-
お世話になります。contentedit...
-
GASでundefinedエラーが出ます
-
javascriptで関数の削除は出来...
-
jQueryのプラグイン「Skitter」...
-
document.clear()の使い方について
-
二次元配列を使って順位をだす...
-
ジェネレーターの作り方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptの基本的なことだと...
-
Latexに関する質問です。
-
DOM要素を削除しても、イベント...
-
Null またはオブジェクトではあ...
-
JavaScript window.openで開く...
-
onload時にPostBackを発生させ...
-
XMLでのAttributeを持ったNode...
-
showModalDialogで開いた画面を...
-
FireFoxのjavascriptで自動でキ...
-
時間でlink, vlink, alinkの文...
-
TexでΣの添え字の位置直し
-
iframeのソースを取得したい
-
乗換案内 VBAで操作したい
-
デフォルトのリンクの色
-
webページ上のTabキーの動き
-
質問です! Operaって、document...
-
ラジオボタンをクリックしたい
-
クリッカブルマップのリンク部...
-
文字を一文字ずつ表示
-
ホームページで矢印に付いて来...
おすすめ情報