Javascript Patchworker - ドキュメント関連

ドキュメント関連

ドキュメント関連

JavaScript

掲示板

ドキュメントについて

　このページではJavaScriptの中でも視覚的な衝動を持ったものを中心に扱っています。その中でもマウスを乗せると特定のイベントが起こる、というようなコンテンツを望んでいる方はマウスオーバー関連のページで扱っていますので、そちらをご覧ください。

　このページで紹介されているスクリプトは派手です。派手なスクリプトはTOPページなどに用いて人を惹き付けるのに大変有益ですが、あまり使いすぎると逆効果になります。もし各ページにこういった演出がほしい場合は、なるべく演出の短いスクリプトを選んでユーザーにストレスを与えないようにしましょう。

設置のアドバイス

　長文のスクリプトの場合は、インフォメーションで紹介した、外部ファイルを読み込む方法を使うと、ヘッダがすっきりして読みやすいソースになります。

　私ここで紹介されているスクリプトはほとんどがDHTMLと呼ばれる技術です。これはスタイルシートの各属性の値をスクリプトによって変化させ、動的な効果を与えることのできる技術ですが、少々難易度が高いです。当然このサイトではスクリプトの知識は必要ありませんが、スタイルシートのページを見てCSSの知識をある程度持っていないと、思い通りにスクリプトを動かすことは困難です。

サンプルプログラム

　インフォメーションのスクリプトの簡略版を用意しておきました。
　文字がスライドインしてきます。このスクリプトの詳細はこちら。

サンプルプログラム

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文字がスライドイン</title>
<script type="text/javascript">
<!--
//ユーザが設定する変数----------------------------------
  var targetId = "motion"; //対象の要素のID属性を設定
  var moveTime = 10; //動く早さを設定　大きいほど遅い
//------------------------------------------------------
  var id;
  var currentLeft;
function ObjSet (){
  if(document.getElementById){
    //ページの左右の余白の幅を取得
    currentLeft = screen.width - (screen.width - 750) / 2;
    
    //ディスプレイからはみ出るように設定
    currentLeft += 500;
    document.getElementById(targetId).style.left = currentLeft;
    
    id = setInterval( ObjSlide, moveTime );
  }
}
function ObjSlide (){
  //左へ40ピクセルずつ移動
  currentLeft -= 40;
  document.getElementById(targetId).style.left = currentLeft;
  
  //20ピクセル以下になったらストップ
  if( currentLeft <= 20 ) clearInterval(id);
}

window.onload = ObjSet;
//-->
</script>
<style type="text/css">

</style>
</head>
<body>

<center>
<h3 class="target" id="motion">文字がスライドインします</h3>
</center>

</body>
</html>