2

これは、JavaScriptとCSSについてさらに学習しながら、情報提供と学習を目的としています。オンロードで背景画像を回転させたいローカルブラウザのインデックスページがあります。周りを見回してさまざまなソリューションで遊んだ後、基本的な回転機能についてこれに落ち着きました。

<html>
<head>
<script language="javascript" type="text/javascript">
function rotate()
{
   var imgArray = new Array("img1.jpg", "img2.jpg", "img3.jpg");
   var aImg = Math.floor(Math.random()*imgArray.length);
   var img = imgArray[aImg];
   document.body.style.background = "url(" + img + ") no-repeat";
   document.body.style.backgroundSize = "cover";
}
</script>
</head>
<body onload="rotate()">
</body>
</html>

その過程でbackgroundSize、ウィンドウを埋めるためにカバーとして設定する前に、配列から選択した後、画像を背景画像として設定する前に、画像のサイズを変更するというアイデアで遊んでいました。

私は多くの検索を行いましたが、実際に機能する解決策はIDで要素を選択することだけですが、HTMLコードのIMGプロパティなどで画像にIDが関連付けられている必要もあります。ここでは、画像が選択され、CSSを使用してJavaScriptで設定されています。

img.width/img.heightとimg.style.width/を使用して画像のサイズを設定しようとしimg.style.heightましたが、他のいくつかのランダムな解決策を見つけましたが、これらを変更しようとすると、画像が変更されないか、まったく表示されません。

function rotate()
{
   var imgArray = new Array("img1.jpg", "img2.jpg", "img3.jpg");
   var aImg = Math.floor(Math.random()*imgArray.length);
   var img = imgArray[aImg];
   image = rsize(img);
   document.body.style.background = "url(" + image + ") no-repeat";
   document.body.style.backgroundSize = "cover";
}
function rsize(image)
{
   image.style.width = "300px";
   image.style.height = "300px";
   return image;
}

私はおそらくここで何か間違ったことをしていることを知っています。この状況で、これらの画像のサイズを変更できる方法はありますか？それとも、これを構築するためのより良い方法はありますか？

前もって感謝します。

4

2 に答える 2

5

現在実行しようとしているURLではなく、実際の画像DOMオブジェクトを設定する必要がありimage.style.widthます。image.style.height

画像オブジェクトは背景画像には使用されないため、背景画像に対して実行しようとしていることを実際に直接実行することはできません。

CSSbackground-sizeプロパティを使用することもできますが、これはかなり新しく、IE9より前のバージョンのIEではサポートされていません。それを使用している場合は、実際のサイズではなく、実際のサイズを設定します"cover"。

また、実際のDOMイメージを使用して、そのDOMイメージをページの中央に表示することもできます。これが、実際に実行しようとしていることです。

たとえば、DOM画像オブジェクトを作成し、それにURLを割り当て、サイズを設定してページに挿入する方法は次のとおりです。

var imgArray = new Array("img1.jpg", "img2.jpg", "img3.jpg");
var aImg = Math.floor(Math.random()*imgArray.length);
var imgURL = imgArray[aImg];
var img = new Image();
img.src = imgURL; 
img.style.width = "300px";
img.style.height = "300px";
img.id = "centeredImage";
document.body.appendChild(img);

必要に応じて、CSSを使用してページの中央に配置することができます。

ここでの作業デモ：http：//jsfiddle.net/jfriend00/jqMtV/

于 2012-06-07T17:02:40.473 に答える
1

いいえ、<img>（再）サイズ設定できる要素はありません（ところで、IDを選択可能にする必要はありません）。を使用すると、DOM要素ではなく文字列rsize(imgArray[aImg])である配列メンバーが操作されるため、存在しないプロパティに値を設定するとエラーが発生します。style

それでも、backgroundSizestyleプロパティを使用することですでに正しい方向に進んでいます。に設定しないでcoverください。必要なサイズに設定してください。

document.body.style.backgroundSize = "300px 300px";

要素を使用する場合は、 ：<img>の最後にこれを追加します。<body>

<img src="some.jpg" style="position:fixed; z-index:-1; width:100%; height:100%" />
于 2012-06-07T17:04:59.893 に答える