2012年12月09日

ボックスが横方向に伸縮 JavaScript

スポンサード リンク

widthプロパティ の値をjavascriptで変更
Element.style.width='値';

テント

 さて使い道は......................................
画像が入れ替わるようにすれば、スライドショーができるかも??今度挑戦!!

heteml
【ちょ〜簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版!
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<html>
 <head>
<title>ボックスが横方向に伸縮 JavaScript </title>
  <style type="text/css">
    #Pid {
      overflow: hidden; /* 内容がボックスからはみ出た部分は非表示 */
      background-color: #fafad2;/* 背景色 */
      width: 310px; /* ボックスの横幅 */
         }
</style>
<script type="text/javascript">
  var boxW=0; //ボックスの横幅変数
  var increaseW=0; //ボックスの横幅増減変数
  var flag = false;
function toggle(){// トグルスイッチ
flag = !flag; // trueとfalseの切り替え ! 否定演算子
 if(flag == true){ Loop();} //条件を満たした場合の処理
  else{ Stop(); } //条件を満たしていない場合の処理
    }
function Loop(){
if (boxW<=0) { increaseW=5; }
 else if (boxW>=500) { increaseW=-5; }
  boxW=boxW+increaseW;
var Pbox=document.getElementById("Pid");// Pidへの参照を変数に代入
     Pbox.style.width=boxW+"px";
      Timer=setTimeout('Loop()',30);
       }
function Stop(){
clearTimeout(Timer);
  }
</script>
</head>
<body>
 <p>
  <button type="button" onclick="toggle()">Start / Stop</button>
 </p>
   <p id="Pid">
<img src="**/image/tento.gif" alt="" width="300" height="170" />
   </p>
</body>
</html>
width プロパティ
 要素の生成するボックスの横幅を指定します。
このサンプルは、ID名が"Pid"である<p>要素のボックスの横幅を
JavaScriptで指定し伸縮を実現しています。
 var Pbox=document.getElementById("Pid");
   Pbox.style.width=boxW+"px";
 // P要素に width値 を指定。
setTimeout メソッド
 タイマーID=setTimeout("func()",msec) は ミリ秒で指定した遅延時間 (msec) の経過後に
指定した処理を行います。 func には処理する関数名を記述します。
clearTimeoutメソッド
 setTimeout メソッドの処理を停止するメソッド。
clearTimeout()のパラメータにタイマーIDを指定します。
  clearTimeout(タイマーID);

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
heteml
overflow プロパティ
setTimeoutメソッド , clearTimeoutメソッド
background 背景に関するプロパティ 一覧
paddingプロパティ ボックスの内側の余白
トグルスイッチ(0と1、trueとfalseを切り替え)条件分岐

posted by javaScript at 17:50 | 大阪 ☔ | ボックス | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。