2013年12月16日

下からスライドインする ニュースティッカー

スポンサード リンク

 Javascript 垂直にスクロールするニュースティッカー
appendChild(), setTimeout()


ティッカーとは、限られた範囲に文字をスクロールさせて表示させる表示手法のことです。
狭いスペースで多くの情報を提供することができるのでよく利用されています。
横にスクロールします。→ 流れる文字 電光掲示板 ティッカー

コロリポプラン 詳細はこちら
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>下からスライドインする ニュースティッカー</title>
 <style type="text/css">
#ticKer{
    border: 1px solid gray; /* ボーダー : 幅,線種,色 */
    border-radius: 12px; /* 角丸ボーダー */
    width: 550px;  /* 横幅 */
    background:linear-gradient(white, #eaeaec); /* 色の線形グラデーション */
    position: relative; /* 相対配置(相対位置)*/
    overflow: hidden; /* はみ出た部分を表示しない */
	 }
#ticKer ul{
    padding: 0; /* 内側余白*/
    margin: 0 auto; 
	 }
 #ticKer li{
   list-style-type: none; /* リストマーク なし */
   padding-top:2px;
   padding-left: 30px;
   color: blue;
   font-weight: bold;
   font-size: 16px;
	}
</style>
<script>
var  upSpeed=15;  //メッセージのスライド速度
var  delay =3000; // 次のメッセージに切り替わるまでの静止時間
var  tickerH=30;  // 表示ボックスの高さ
 window.onload =function divScroller(){
  scroller = document.getElementById("ticKer"); // div 表示ボックス
  scroller.style.height= tickerH+"px"; // 表示ボックスの高さ
  scroller.style.lineHeight= tickerH+"px"; // 行の高さ  
	  slide = document.getElementById("ulArea"); // スライドさせる ul要素
	  slide.style.position = "absolute"; // 絶対配置
	  slide.style.top = tickerH+"px" ;  // slide のtop(上辺)の位置
	innScroll(tickerH, upSpeed, delay)
		  }
  function innScroll(tickerH, upSpeed, delay){
   msec = upSpeed; // スクロール時間
   numTop = parseInt(slide.style.top) // 数値文字列を整数に変換
  if (numTop > -tickerH){ // top位置が -30にならない間は
   slide.style.top = (numTop-1)+"px"; // top位置を -1px 上へ
	   }
  else{ slide.style.top = 0+"px"; 
               cngLi(); // 次のメッセージと交代
	     }
   if(numTop==0){msec = delay;// 静止時間 現在のメッセージを待機
	   }
    setTimeout("innScroll("+ tickerH +","+ upSpeed +"," + delay +")", msec);
		}
function cngLi(){ // メッセージの移動
   base= document.getElementById("ulArea");
    liList = base.getElementsByTagName("li");// 与えられたタグ名を持つ要素のリスト
     elm = liList[0];// 最上部の "li"要素
    base.appendChild(elm); // elm を子ノードとして末尾に移動する。
      }
</script>
</head>
<body>
<div  id="ticKer">
  <ul id="ulArea"> <!-- ul要素 箇条書き,リスト -->
    <li>縦にスクロールする、ニュースティッカーです。</li>
    <li>表示ボックスの下からスライドインします。</li>
    <li>前のテキストが上に スライドアウトしながら、</li>
    <li>次のテキストが下から スライドインしてきます。</li>
    <li><a href="javascript:void(0)">動く文字 ティッカー 電光掲示板</a></li>
    <li><a href="javascript:void(0)">イベント、イベントハンドラ</a></li>
    <li>これで おしまい</li>
  </ul>
</div>
</body>
</html>
parseInt(string)関数
  簡単にいえば 引数 stringに格納されている数値文字列を
整数に転換します。詳しくは....parseInt()関数
setTimeout メソッド
 setTimeout("func()",msec) は ミリ秒で指定した遅延時間 (msec) の経過後に
指定した処理を行います。 func には処理する関数名を記述します。
appendChild()メソッド
 base.appendChild(elm)は、「base」に指定した親要素の子ノードリストの末尾に
引数「elm」に指定したノードを追加するメソッドです。
追加するノード(child)が既にHTML文書内に存在しているノードであれば、指定した位置に追加され
元の場所にあったノードはremoveChild()する必要もなく削除されます。
-追加、削除- で 実質 移動した事になります。
appendChild()メソッド DOM 要素の移動 (追加、削除)
タグ:ティッカー
posted by javaScript at 19:49 | 大阪 ☁ | 動く文字 ティッカー 電光掲示板 | このブログの読者になる | 更新情報をチェックする
×

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