JS を使用して HTML で回転するクリスマスツリーを実装する
|
<!DOCTYPE ヘムル パブリック>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<タイトル>
ZXW-NUDTより
</タイトル>
<スタイル>
本文{text-align:center}
html、本文
{
幅: 100%;
高さ: 100%;
マージン: 0;
パディング: 0;
境界線: 0;
}
分割
{
マージン: 0;
パディング: 0;
境界線: 0;
}
.nav
{
位置: 絶対;
上: 0;
左: 0;
幅: 100%;
高さ: 27px;
背景色: 白;
色: 黒;
テキスト配置: 中央;
行の高さ: 25px;
}
1つの
{
色: 黒;
テキスト装飾: なし;
border-bottom: 1px 破線の黒;
}
ホバー
{
border-bottom: 1px 赤一色;
}
。前の
{
フロート: 左;
左マージン: 10px;
}
。次
{
フロート: 右;
右マージン: 10px;
}
。緑
{
色: 緑;
}
。赤
{
色: 赤;
}
テキストエリア
{
幅: 100%;
高さ: 100%;
境界線: 0;
パディング: 0;
マージン: 0;
パディング下部: 20px;
}
.ブロック外枠
{
フロート: 左;
幅: 22%;
高さ: 100%;
パディング: 5px;
border-left: 1px 黒一色;
マージン: 30px 3px 3px 3px;
}
.ブロックインナー
{
高さ: 68%;
}
。1つ
{
境界線: 0;
}
</スタイル>
</head>
<本文マージン幅="0" マージン高さ="0">
<キャンバスid="c" 高さ="356" 幅="446">
<スクリプト>
var 折りたたまれた = true;
関数トグル()
{
var fs = top.document.getElementsByTagName('フレームセット')[0];
var f = fs.getElementsByTagName('frame');
（折りたたまれた）
{
fs.rows = '250px,*';
fs.noResize = false;
f[0].noResize = false;
f[1].noResize = false;
}
それ以外
{
fs.rows = '30px,*';
fs.noResize = true;
f[0].noResize = true;
f[1].noResize = true;
}
折りたたまれました = !折りたたまれました;
}
</スクリプト>
<スクリプト>
var b = document.body;
タグ名で要素を取得する
var a = c.getContext('2d');
ドキュメントのbodyの幅;
</スクリプト>
<スクリプト>
M=数学;
Q=M.ランダム;J=[];
16;
T = M.sin;
E=M.sqrt;
(O=k=0;x=z=j=i=k<200;) の場合
(M[k]=k?c.cloneNode(0):c) の場合
{
幅=高さ=k?32:W=446;
(getContext('2d') を使用)
もし(k>10|!k)
のために（
フォント='60px インパクト',
V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)':
V+(147+I)+','+(k%2?128+I:0)+','+I+',.5)':'#cca',i<7;)
beginPath(fill(arc(Ui/3,24-i/2,k==13?4-(i++)/2:8-i++,0,M.PI*2,1)));
それ以外の場合(;
x=T(i)、
y=Q()*2-1、
D=x*x+y*y、
B=E(Dx/.9-1.5*y+1)、
R=67*(B+1)*(L=k/9+.8)>>1、
i++<W;
）
もし(D<1)
beginPath(strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'),
移動先(U+x*8,U+y*8)
ライントゥ(U+x*U,U+y*U)、
脳卒中（）;
のために（
y=H=k+E(k++)*25、
R = Q() * W;
P=3,j<H;)
J[O++]=[
x+=T(R)*P+Q()*6-3、y+=Q()*U-8、
z+=T(R-11)*P+Q()*6-3、
j/H*20+((j+=U)>H&Q()>.8?Q(P=9)*4:0)>>1]
}
setInterval(関数G(m,l)
{
A=T(D-11) です。
もし(l)
戻る（
m[2]-l[2])*A+(l[0]-m[0])*T(D);
a.clearRect(0,0,W,W);
J.ソート(G);
のために（
私=0;
L=J[i++];
a.drawImage(M[L[3]+1],207+L[0]*A+L[2]*T(D)>>0,L[1]>>1))
{
もし(i==2e3)
a.テキストを埋め込む
（「ハッピークリスマス！」、U、345）；
もし(!(i%7))
a.drawImage(M[13],
((157*(i*i)+T(D*5+i*i)*5)%W)>>0、
((113*i+(D*i)/60)%(290+i/99))>>0);
}
D+=.02
},1)
</スクリプト>
</本文>
</html>バックグラウンド ミュージックの追加については、この HTML ファイルに music という名前のフォルダーがあり、そのフォルダー内に music.mp3 というオーディオ ファイルがあると仮定します。コードは次のようになります。 <audio src="music/music.mp3" autoplay="自動再生" loop="ループ"></audio>
背景を変更するには、次のようにします (まだ試していません): <div class="image"><img src="images.jpg" alt="" /></div><div class="content"> これで、JS を使用して HTML で回転するクリスマス ツリーを実装する方法についての記事は終わりです。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援して頂ければ幸いです。 以下もご興味があるかもしれません:
|
>>: CSSは解析プロセスでさまざまな読み込み効果を実装します
推薦する
テーブルの作成、フィールドの追加、フィールドの変更、インデックスの追加によく使用される MySQL の SQL 文の概要
この記事では、テーブルの作成、フィールドの追加、フィールドの変更、インデックスの追加を行う一般的な ...
Js の継承とプロトタイプチェーンを理解するのに役立つ記事
目次継承とプロトタイプチェーン継承されたプロパティ継承されたメソッドJavaScript でのプロト...
CSS の position 属性の値に関する研究 (概要)
CSS の位置属性は要素の配置タイプを指定し、上、下、左、右を使用して要素を具体的に配置します...
vue $setは配列コレクションオブジェクトへの値の割り当てを実装します
Vue $set 配列コレクションオブジェクトの割り当てVue カスタム配列オブジェクト コレクショ...
psdカット画像をdiv+css形式に変換する
PSD から div css へのウェブページ切り取り例ステップ 1: まず、すべてのタグの内側と外...
Element における複数データ読み込み最適化の実装
目次シナリオコードの実装要約:シナリオ最近、ElementUI をベースにしたバックグラウンド管理シ...
略語マークと頭字語マーク
<abbr>タグと<acronym>タグは、Web ページに表示される略語と...
vitrualBox+ubuntu16.04 python3.6 最新チュートリアルと詳細な手順のインストール
最近ディープラーニングを学ぶためにUbuntu+Python 3.6バージョンを使う必要があるため、...
HTML の <input> タグの詳細な説明と、それを無効にする方法
定義と使用法<input> タグはユーザー情報を収集するために使用されます。 type ...
CocosCreator 学習モジュールスクリプト
Cocos Creator モジュラースクリプトCocos Creator を使用すると、コードを複...
jQueryはシンプルなカルーセル効果を実装します
みなさんこんにちは。今日はカルーセルの実装についてお話しします。私が作成したカルーセルの効果は次のと...
nginxで静的リソースを公開する方法
ステップ準備した静的リソースファイルを指定されたフォルダに配置しますnginx 設定ファイルを変更す...
HTML の表の行と列を結合する問題の解決策の詳細な説明
私たちが構築しようとしていたウェブサイトには、長い文章だけでなく、多数の表も含まれており、表のレイア...
Vue プロジェクトのパッケージ化、マージ、圧縮により、Web ページの応答速度を最適化します。
目次序文1. リクエスト内容が大きすぎる解決： CDN の紹介リクエストリソースを圧縮する1. HT...
MySQLクエリプランでken_lenの値を計算する方法
key_lenの意味MySQL では、次に示すように、explain を使用して SQL ステートメ...