塩川幸恵 Portfolio
サイト制作
オリジナルサイト
習作サイト
デザイン案
バナー
オリジナルバナー
習作バナー
JavaScript+jQuery
動画
Photoshop+Illustrator
エディトリアル
イラスト+漫画
デジタル
アナログ
3D
四コマ漫画
JavaScript+
jQuery
JavaScript
JavaScriptを実装しました。
1
現在の年月日曜日・時刻を(〜年〜月〜日〜曜日・〜時〜分〜秒)を表示。
2
10×10の早見表を作成して表示。
3
入力された値が「7の倍数」かどうかを、ボタンを押したときに判別して表示。
0と全角文字は、再入力を促すメッセージを表示。DOM形式で記述。
4
1〜入力された値までの合計を、ボタンを押したときに表示。
0と全角文字は、再入力を促すメッセージを表示。DOM形式で記述。
5
「大吉」「中吉」「小吉」「凶」と、ボタンを押したときにランダムに表示される
おみくじプログラム。DOM形式で記述。
6
ブラウザが更新されるたびに、その都度ランダムに画像を変更して表示。
jQuery
jQueryを実装しました。
1
「削除」ボタンを押したら、p要素を削除されるよう記述。
2
p要素をクリックするたびにp要素のテキストが
「もっと見る」と「閉じる」が交互に切り替わるように記述。
3
300pxの正方形(背景色・自由)をクリックしたら、
0.5秒かけて300pxの正円になり、背景色も変化。
4
幅300px、高さ400pxの長方形を作り、「表示」ボタンを押したら、
非表示になっている長方形が「1秒」かけてスライドして表示するよう記述。
5
幅300px、高さ400pxの長方形を、「表示・非表示」ボタンで、スライドして表示・非表示を繰り返し実行されるよう記述。さらにアニメーション実行中は処理を受け付けないように記述。
6
「移動」ボタンを押したら300pxの正方形が0.5秒かけてx方向に300px移動するよう記述。
移動はcssのtransformを使用。
7
「移動」ボタンを押したら300pxの正方形が1秒かけてx方向に300px移動し、
その後0.5秒かけてy方向に200px移動するように記述。
8
画像を4枚使用したモーダルウィンドウを作成。
9
プラスボタンをクリックしたら、メニューが表示され、
マイナスボタンをクリックしたら、メニューが見えなくなるよう記述。
10
タブパネルを作成。(liをクリックしたら画像が切り替わるように記述。選ばれているliには別のスタイルを適用)