テロップを流すサンプル

JavaScript

question:1178848515の回答の修正です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head>
<script type="text/javascript">
/**
 * スタイル値取得関数
 * elemID       : 対象要素ID
 * IEStyleProp  : IE用CSS属性名(aaaBbb形式)
 * CSSStyleProp : その他用CSS属性名(aaa-bbb形式)
 */
function getElementStyle(elemID, IEStyleProp, CSSStyleProp){
  var elem;
  if(typeof(elemID) == "string"){
    elem = document.getElementById(elemID);
  }else{
    elem = elemID;
  }
  if(elem.currentStyle){
    return elem.currentStyle[IEStyleProp];
  }else if(window.getComputedStyle){
    var compStyle = window.getComputedStyle(elem, "");
    return compStyle.getPropertyValue(CSSStyleProp);
  }
}
/**
 * テロップ表示関数
 * msgs : 表示メッセージ配列
 * len  : 移動距離(px)
 * time : 移動間隔(ms)
 * id   : テロップ表示要素ID
 */
function terop(msgs, len, time, id){
  var base = document.getElementById(id);
  var stylePosition = getElementStyle(base, "position", "position");
  if(stylePosition == "" || stylePosition == "static"){
    base.style.position = "relative";
  }
  var styleWidth = getElementStyle(base, "width", "width");
  if(styleWidth == "" || styleWidth == "auto"){
    base.style.width = "100%";
  }
  base.style.overflow = 'hidden';
  var msg = document.createElement("span");
  base.appendChild(msg);
  msg.style.position = "relative";
  msg.style.left = base.offsetWidth + "px";
  msg.style.whiteSpace = "nowrap";
  var i = 0;
  msg.innerHTML = msgs[i];
  var move = function(){
    if(parseInt(msg.style.left) < -(msg.offsetWidth)){
      msg.style.left = (base.offsetWidth + 1) + "px";
      i++;
      if(i >= msgs.length) i = 0;
      msg.innerHTML = msgs[i];
    }
    if(parseInt(msg.style.left) > base.offsetWidth){
      msg.style.left = base.offsetWidth + "px"; 
    }else{
      msg.style.left = (parseInt(msg.style.left) - len) + "px";
    }
    setTimeout(move, time);
  };
  move();
}
/**
 * ページ読み込み完了時実行関数
 */
function init(){

  terop([
    "こんなかんじで",
    "つぎつぎに",
    "流れていきます。"
  ], 1, 20, "terop1");

  terop([
    "<span style='color:blue;'>"
    + "あああああああああああああああああああああ"
    + "あああああああああああああああああああああ"
    + "</span>",
    "<span style='color:red;'>"
    + "いいいいいいいいいいいいいいいいいいいいい"
    + "いいいいいいいいいいいいいいいいいいいいい"
    + "</span>",
    "<span style='font-weight:bold;'>"
    + "ううううううううううううううううううううう"
    + "ううううううううううううううううううううう"
    + "</span>"
  ], 1, 10, "terop2");

};
</script>
<style type="text/css" media="screen">
.terop{
  border:solid blue 2px;
}
</style>
</head>
<body onload="init();">
<div id="terop1" class="terop"></div>
<div id="terop2" class="terop"></div>
</body>
</html>

2007/11/13 文字列の自動折り返しを禁止しました。(<br/>タグでの折り返しはできます)
2007/09/20 移動間隔とテロップ表示要素IDを引数で指定できるようにしました。
2009/03/11 テロップ表示要素がリサイズされて文字列が要素から外れた場合、表示要素の左端から文字列の表示を開始するようにしました。