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)関数
setTimeout メソッド
setTimeout("func()",msec) は ミリ秒で指定した遅延時間 (msec) の経過後に指定した処理を行います。
func には処理する関数名を記述します。
appendChild()メソッド
base.appendChild(elm)は、「base」に指定した親要素の子ノードリストの末尾に引数「elm」に指定したノードを追加するメソッドです。
追加するノード(child)が既にHTML文書内に存在しているノードであれば、指定した位置に追加され
元の場所にあったノードはremoveChild()する必要もなく削除されます。
-追加、削除- で 実質 移動した事になります。
appendChild()メソッド DOM 要素の移動 (追加、削除)
- コロリポプラン 詳細はこちら
- WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
- CSS positionプロパティ
- Dom getElementsByTagName()メソッド
- setTimeoutメソッド , clearTimeoutメソッド
- appendChild() メソッド 指定したノードを追加
- removeChild()メソッド 指定したノードを削除
- element.cloneNodeメソッド。要素の複製 DOM
- DOM（Document Object Model）の基本
- DOM 要素の生成、削除 createElement , removeChild
- リスト・箇条書き HTMLタグ
タグ：ティッカー
