ホームページ >ウェブフロントエンド >jsチュートリアル >jsを使ってcssを操作して背景画像を変更するjsを実装する example_javascriptスキル
jsを使ってcssを操作して背景画像を変更するjsを実装する example_javascriptスキル
- WBOYオリジナル
- 2016-05-16 16:56:011133ブラウズ
1. JS を使用して、ランダムに表示する画像を格納する画像配列を定義します
コードをコピー コードは次のとおりです:
ar imgArr=["http:// www.jb51 .net/logo_cn.png",
"http://www.jb51.net/baidu_sylogo1.gif",
"http://www.jb51.net/news/uploadImg/20120111/ 20120111081906_79.jpg ",
"http://www.jb51.net/news/uploadImg/20120111/20120111081906_76.jpg"];
上記の写真をご自身の写真に置き換えてください。
2. JS を使用して乱数を生成します。もちろん、この乱数は 0 から始まり、imgArr.length-1 で終わります。
コードをコピーします コードは次のとおりです。
varindex =parseInt(Math.random( )*(imgArr.length-1));
このようにして、現在のランダムに生成された画像を取得します
コードをコピー コードは次のとおりです。
var currentImage=imgArr[index];
3. 背景画像がランダムに生成されるので、JSを使用してこの画像を背景画像として使用します。
コードをコピーします コードは次のとおりです:
document.getElementById("BackgroundArea")。 style.backgroundImage ="url(" currentImage ")";
これはデモなので、ページ上に ID BackgroundArea を持つ div を定義し、この div にランダムな背景も設定しました。
コードをコピー コードは次のとおりです:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。