人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptでテロップを作成して
<div id="terop"></div>
みたいにしたらテロップが
流れるようなサンプルソースはありませんか?
ひとつ流れ終わったら
次が流れるようなテロップです。

●質問者: hopefully
●カテゴリ:就職・転職 ウェブ制作
✍キーワード:JavaScript ひとつ サンプルソース テロップ 作成
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● orz66
●15ポイント

横スクロールでよろしければ

http://www.daantje.nl/gpl-projects/simplehorizontalscroll/



縦はこちら

http://www.dynamicdrive.com/dynamicindex2/prohtmlticker.htm



こちらがイメージに近いのかもしれません(縦スクロール)

http://www.smartmenus.org/vadikom/products/free-scripts/

しかし

ではさむタイプではないので申し訳ないです。

◎質問者からの返答

ありがとうございます。


2 ● susie-t
●55ポイント

以下でどうでしょう。

<html>
<head>
<script type="text/javascript">
<!--
function terop(msgs, len){
 var base = document.getElementById("terop");
 if(base.style.position == "" || base.style.position == "static"){
 base.style.position = "relative";
 }
 base.style.overflow = "hidden";
 var msg = document.createElement("div");
 base.appendChild(msg);
 msg.style.position = "relative";
 msg.style.left = (base.offsetWidth + 1) + "px";
 var i = 0;
 var move = function(){
 if(parseInt(msg.style.left) > base.offsetWidth){
 msg.innerHTML = msgs[i];
 }
 msg.style.left = (parseInt(msg.style.left) - len) + "px";
 if(parseInt(msg.style.left) < -(msg.offsetWidth)){
 msg.style.left = (base.offsetWidth + 1) + "px";
 }
 i++;
 if(i >= msgs.length) i = 0;
 setTimeout(move, 10);
 };
 setTimeout(move, 10);
}
function init(){
 terop([
 "こんなかんじで",
 "つぎつぎに",
 "流れていきます。"
 ], 10);
};
//-->
</script>
<style type="text/css" media="screen">
#terop{
 border:solid blue 2px;
}
</style>
</head>
<body onload="init();">
<div id="terop"></div>
</body>
</html>

参考になれば幸いです。

◎質問者からの返答

これはかなり参考になりますw

ありがとうございますw

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ