JavaScript/Sample2
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2025
ソーシャルデザイン演習/2025
情報デザイン論/2025
情報デザイン演習IIA/2025
コンピュータ概論/2025
3DCG演習/2025
情報デザイン研究/2025
卒業研究/2025
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*JavaScript 入門サンプル２
インタラクティブな事例
~
**Keyboard
キーボードの [A] [D] [W] [X] や カーソルによって画面内の...
-DEMO：https://koichi-inoue.github.io/JS_Sample_04/
-CODE：https://github.com/koichi-inoue/JS_Sample_04
~
~
**Mouse１ [[→ DEMO>https://design.kyusan-u.ac.jp/SampleS...
マウスの位置情報を用いたインタラクティブなサンプルを紹介...
-''index.html''
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Basic Sample</title>
<script type="text/javascript" src="script.js"><...
<link rel="stylesheet" type="text/css" href="sty...
</head>
<body >
<div id="container">
<div id="box">
BOX
</div>
</div>
</body>
</html>
-''style.css''
#container{
position:relative;
width:100%; height:100%;
background-color:maroon;
}
#box {
position:absolute;
width:100px; height:100px;
background-color:silver;
}
-''script.js''
window.onload = function(){
var field = document.getElementById('container');
field.addEventListener('click', FitElement, false);
}
function FitElement(event){
var obj = document.getElementById('box');
obj.style.top = (event.clientY - 50) + "px";
obj.style.left = (event.clientX - 50) + "px";
}
~
~
**Mouse２ [[→ DEMO>https://design.kyusan-u.ac.jp/SampleS...
先の事例の応用で、クリックした場所へBOXがアニメーションし...
-''index.html''
事例１と同様
-''style.css''
事例１と同様（Boxのサイズが異なるだけ）
-''script.js''
var dx = 0;
var dy = 0;
var x = 100;
var y = 100;
window.onload = function(){
var timer = setInterval(AnimateElement, 5);
var field = document.getElementById("container");
field.addEventListener("click", InitPosition, false);
}
function InitPosition(event){
dx = ( event.clientX - x )/50;
dy = ( event.clientY - y )/50;
}
function AnimateElement(){
var obj = document.getElementById('box');
if( x < 0 || window.innerWidth - 40 < x ) dx *= -1;
if( y < 0 || window.innerHeight - 40 < y ) dy *= -1;
x += dx;
y += dy;
obj.style.left = x + 'px';
obj.style.top = y + 'px';
}
-''付記：''パフォーマンスを意識したアニメーションを実装す...
~
~
**Mouse３ [[→ DEMO>https://design.kyusan-u.ac.jp/SampleS...
上の事例を配列変数を使ってさらに応用します。
-＜li＞タグに書かれた複数の要素をアニメーションさせます。
-画面をクリックと、すべての要素が一旦その位置に初期化され...
-''index.html''
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Basic Sample</title>
<script type="text/javascript" src="script.js"><...
<link rel="stylesheet" type="text/css" href="sty...
</head>
<body >
<div id="container">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
</ul>
</div>
</body>
</html>
-''style.css''
*{
margin:0;
padding:0;
}
#container{
position:relative;
width:100%; height:100%;
background-color:maroon;
}
li {
position:absolute;
width:20px; height:20px;
list-style-type:none;
background-color:silver;
}
-''script.js''
// GLOBAL VALUE
var dx = new Array(100);
var dy = new Array(100);
var x = new Array(100);
var y = new Array(100);
var obj;
window.onload = function(){
var timer = setInterval(AnimateElement, 10);
var field = document.getElementById('container');
field.addEventListener('click', InitPosition, false);
obj = document.getElementsByTagName('li');
// initialize
for( i=0 ; i<obj.length ; i++){
x[i] = 100;
y[i] = 100;
dx[i] = i;
dy[i] = i;
}
}
function InitPosition(event){
for( i=0 ; i<obj.length ; i++){
x[i] = event.clientX;
y[i] = event.clientY;
dx[i] = Math.floor ( Math.random()*21 - 10 );
dy[i] = Math.floor ( Math.random()*21 - 10 );
}
}
function AnimateElement(){
for( i=0 ; i<obj.length ; i++){
if( x[i] < 10 || window.innerWidth - 30 < x[i]...
if( y[i] < 10 || window.innerHeight - 30 < y[i]...
x[i] += dx[i];
y[i] += dy[i];
obj[i].style.left = x[i] + 'px';
obj[i].style.top = y[i] + 'px';
}
}
-''付記：''パフォーマンスを意識したアニメーションを実装す...
~
~
終了行:
*JavaScript 入門サンプル２
インタラクティブな事例
~
**Keyboard
キーボードの [A] [D] [W] [X] や カーソルによって画面内の...
-DEMO：https://koichi-inoue.github.io/JS_Sample_04/
-CODE：https://github.com/koichi-inoue/JS_Sample_04
~
~
**Mouse１ [[→ DEMO>https://design.kyusan-u.ac.jp/SampleS...
マウスの位置情報を用いたインタラクティブなサンプルを紹介...
-''index.html''
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Basic Sample</title>
<script type="text/javascript" src="script.js"><...
<link rel="stylesheet" type="text/css" href="sty...
</head>
<body >
<div id="container">
<div id="box">
BOX
</div>
</div>
</body>
</html>
-''style.css''
#container{
position:relative;
width:100%; height:100%;
background-color:maroon;
}
#box {
position:absolute;
width:100px; height:100px;
background-color:silver;
}
-''script.js''
window.onload = function(){
var field = document.getElementById('container');
field.addEventListener('click', FitElement, false);
}
function FitElement(event){
var obj = document.getElementById('box');
obj.style.top = (event.clientY - 50) + "px";
obj.style.left = (event.clientX - 50) + "px";
}
~
~
**Mouse２ [[→ DEMO>https://design.kyusan-u.ac.jp/SampleS...
先の事例の応用で、クリックした場所へBOXがアニメーションし...
-''index.html''
事例１と同様
-''style.css''
事例１と同様（Boxのサイズが異なるだけ）
-''script.js''
var dx = 0;
var dy = 0;
var x = 100;
var y = 100;
window.onload = function(){
var timer = setInterval(AnimateElement, 5);
var field = document.getElementById("container");
field.addEventListener("click", InitPosition, false);
}
function InitPosition(event){
dx = ( event.clientX - x )/50;
dy = ( event.clientY - y )/50;
}
function AnimateElement(){
var obj = document.getElementById('box');
if( x < 0 || window.innerWidth - 40 < x ) dx *= -1;
if( y < 0 || window.innerHeight - 40 < y ) dy *= -1;
x += dx;
y += dy;
obj.style.left = x + 'px';
obj.style.top = y + 'px';
}
-''付記：''パフォーマンスを意識したアニメーションを実装す...
~
~
**Mouse３ [[→ DEMO>https://design.kyusan-u.ac.jp/SampleS...
上の事例を配列変数を使ってさらに応用します。
-＜li＞タグに書かれた複数の要素をアニメーションさせます。
-画面をクリックと、すべての要素が一旦その位置に初期化され...
-''index.html''
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Basic Sample</title>
<script type="text/javascript" src="script.js"><...
<link rel="stylesheet" type="text/css" href="sty...
</head>
<body >
<div id="container">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
</ul>
</div>
</body>
</html>
-''style.css''
*{
margin:0;
padding:0;
}
#container{
position:relative;
width:100%; height:100%;
background-color:maroon;
}
li {
position:absolute;
width:20px; height:20px;
list-style-type:none;
background-color:silver;
}
-''script.js''
// GLOBAL VALUE
var dx = new Array(100);
var dy = new Array(100);
var x = new Array(100);
var y = new Array(100);
var obj;
window.onload = function(){
var timer = setInterval(AnimateElement, 10);
var field = document.getElementById('container');
field.addEventListener('click', InitPosition, false);
obj = document.getElementsByTagName('li');
// initialize
for( i=0 ; i<obj.length ; i++){
x[i] = 100;
y[i] = 100;
dx[i] = i;
dy[i] = i;
}
}
function InitPosition(event){
for( i=0 ; i<obj.length ; i++){
x[i] = event.clientX;
y[i] = event.clientY;
dx[i] = Math.floor ( Math.random()*21 - 10 );
dy[i] = Math.floor ( Math.random()*21 - 10 );
}
}
function AnimateElement(){
for( i=0 ; i<obj.length ; i++){
if( x[i] < 10 || window.innerWidth - 30 < x[i]...
if( y[i] < 10 || window.innerHeight - 30 < y[i]...
x[i] += dx[i];
y[i] += dy[i];
obj[i].style.left = x[i] + 'px';
obj[i].style.top = y[i] + 'px';
}
}
-''付記：''パフォーマンスを意識したアニメーションを実装す...
~
~
ページ名:
