テキストをスクロールしてローテーションしたいと思いますが、シンプルな方法はありますでしょうか。
次の用な動きを想定しています。
-------------------------------------
<html>
<head>
<title>一定時間でローテーションする広告</title>
<body>
<!--shinobi1-->
<script type="text/javascript" src="http://x8.tubakurame.com/ufo/133597903">
</script>
<noscript>
</noscript>
<!--shinobi2-->
</body>
</html>
-------------------------------------
よろしくお願いします。
投稿日時 - 2009-12-02 23:44:46
もう、解決されて、どうでもいいかも知れませんが、まだ締め切ってないようなので
少しだけ、簡潔にわかりやすくしました。
<body>
<h1 style="position:relative;height:1em;overflow-y:hidden;background-color:silver;">
<span id="title_text" style="position:absolute;top:1em;height:1em;background-color:red;width:100%;"></span>
</h1>
<div>
本文
</div>
<script type="text/javascript" charset="utf-8">
(function(){
var title=["今日のタイトルはJAVASCRIPTの勉強です。",
"タイマーの使い方を試してみます。",
"スタイル属性の変更でスクロールさせます。"];
var title_elm = document.getElementById("title_text");
var rot_count=0;
var scroll_count=10;
var rot_timer=setInterval(rot_set(title_elm,title),2000);
var scroll_timer;
function rot_set(elm,data){
return function(){
if(rot_count>(data.length-1)){
rot_count=0;
}else{
elm.innerHTML=data[rot_count];
scroll_timer=setInterval(scrolling(title_elm),100);
rot_count++;
}
}
}
function scrolling(elm){
return function(){
if(scroll_count>=0){
elm.style.top= (scroll_count/10) + "em";
scroll_count--;
}else{
clearInterval(scroll_timer);
scroll_count=10;
}
}
}
})();
</script>
</body>
投稿日時 - 2009-12-03 21:41:58
お礼
ありがとうございました。
何とか実装までたどり着けそうです。
投稿日時 - 2009-12-04 17:14:58
1人が「このQ&Aが役に立った」と投票しています
ベストアンサー以外の回答（7件中 1～5件目)
もう、かいけつされて、どうでもいいかもしれませんが、
まだしめきっていないようなので、
すこしだけ、めんどうくさくしました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>ここをぐるぐるまわすんじゃ～なかったのかぁ～・・・</title>
<style type="text/css">
#waku {
padding : 0;
overflow : auto;
height : 20px;
}
</style>
<body>
<div id="waku">
なんだタイトルをまわすのじゃなかったのかぁ～<br>
まぁ～たしかにほそくをみれば、しからうえにって<br>
かいてあったよね～<br>
いつものように、りかいりょくないなぁ～<br>
</div>
<script type="text/javascript">
var Roller = function ( ) {
this.init.apply( this, arguments );
};
Roller.prototype.init = function ( targetId, step, interval, cssText ) {
var cnt, o;
var e = document.getElementById( targetId );
if( 'DIV' !== e.nodeName ) return;
var ne = document.createElement( 'DIV' );
ne.style.cssText = cssText;
ne.style.marginBottom = e.offsetHeight + 'px';
ne.style.marginTop = e.offsetHeight + 'px';
for( cnt = 0; o = e.firstChild; )
ne.appendChild( o );
e.appendChild( ne );
e.style.overflow = 'hidden';
this.e = e;
this.step = step;
this.hMax = ne.offsetHeight + e.offsetHeight;
this.top = 0;
this.interval = interval;
this.timerId = null;
};
Roller.prototype.start = function ( n ) {
if( 'undefined' === typeof n || 'number' !== typeof n ) n = -1;
this.flag = n;
this.timerId = setInterval( (function ( that ) {
return function ( ) {
that.loop();
};
})( this ), this.interval );
};
Roller.prototype.stop = function ( ) {
clearInterval( this.timerId );
};
Roller.prototype.loop = function ( ) {
this.e.scrollTop = this.top;
this.top += this.step;
if( this.top > this.hMax ) {
this.top = 0;
if( this.flag > 0 ) {
this.flag -= 1;
if( 0 == this.flag ) this.stop();
}
}
};
(new Roller( 'waku', 1, 50 )).start();
</script>
ぜんかくくうはくは、はんかくにでもしてください
投稿日時 - 2009-12-04 12:33:15
ちょっときづついているのでこっちに。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>ここをぐるぐるまわすんだなぁ～</title>
<body>
<script type="text/javascript">
var kurukuru = function ( node, time, interval ) {
this.counter = 0;
this.target = node;
this.interval = interval;
this.timerId = setInterval( (function( that ) {
return function () {
that.loop();
};
})( this ), this.interval);
setTimeout( (function (that) {
return function () {
that.stop();
};
})(this), time);
//_______
this.loop = function ( ) {
this.target.title = this.target.title.replace(/^(.)(.+)$/,'$2$1');
if( ++this.counter > 600 ) this.stop();
};
this.stop = function () {
this.timerId && clearInterval( this.timerId );
this.timerId = null;
};
function getCTime () {
return (new Date).getTime();
}
};
kurukuru.start = function( target, time, interval ) {
new kurukuru( target, time, interval );
};
kurukuru.start( document, 20000, 20 );
</script>
投稿日時 - 2009-12-03 17:18:28
補足
すいません。
説明が足りなくて、タイトルをぐるぐる回すほうに
話がいってしまったようですね。
投稿日時 - 2009-12-03 21:36:10
というわけで<title>タグはあきらめて、表示させるテキストを
3個配列に用意して<H1>タグをスクロールして見ました。
もっときれいに簡潔にかけるかも
<head>
----------------------------------
<script type="text/javascript">
<!--
var interval0,interval1,count0,count1;
var title_area,title_text;
var title=["今日のタイトルはJAVASCRIPTの勉強です。",
"タイマーの使い方を試してみます。",
"スタイル属性の変更でスクロールさせます。"];
window.onload = function () {
count0=0;
interval0=setInterval("title_scroll()",2000);
}
function title_scroll(){
if (count0<3){
title_text = document.getElementById("title_text");
title_text.innerHTML=title[count0];
count1=10;
interval1=setInterval("title_scrolling()",100);
count0++;
}else{
count0=0;
}
}
function title_scrolling(){
if(count1>=0){
title_text.style.top= (count1/10) + "em";
count1--;
}else{
clearInterval(interval1);
}
}
// -->
</script>
</head>
<body>
<h1 style="position:relative;height:1em;overflow-y:hidden;background-color:silver;">
<span id="title_text" style="position:absolute;top:0.5em;height:1em;background-color:red">AAAAAAA</span>
</h1>
----------------------------------
</body>
投稿日時 - 2009-12-03 16:52:27
補足
すごい
かなりいいです。
・0番目の表示はいらないかな
・スクロールする文字がスクロールする前にチラッと見える
・3番目の文字の表示のあと5000ms止まる
以外は希望通りです。
<html><head></head>
<body>
<script type="text/javascript">
<!--
var interval0,interval1,count0,count1;
var ad_text;
var ad=[
"1番目：<a href='http://google.co.jp' target='blank'>Googleです</a>",
"2番目：<a href='http://yahoo.co.jp/' target='blank'>Yahooです</a>",
"3番目：<a href='http://goo.ne.jp/' target='blank'>Gooです</a>"
];
window.onload = function () {
count0=0;
interval0=setInterval("ad_scroll()",5000);
}
function ad_scroll(){
if (count0<3){
ad_text = document.getElementById("ad_text");
ad_text.innerHTML=ad[count0];
count1=10;
interval1=setInterval("ad_scrolling()",50);
count0++;
}else{
count0=0;
}
}
function ad_scrolling(){
if(count1>=0){
ad_text.style.top= (count1/10) + "em";
count1--;
}else{
clearInterval(interval1);
}
}
// -->
</script>
<h1 style="position:relative;height:1em;overflow-y:hidden;background-color:white;">
<span id="ad_text" style="position:absolute;top:0em;height:1em;background-color:white">0番目：楽しいイベントを企画していま～す</span>
</h1>
</body>
</html>
投稿日時 - 2009-12-03 21:27:31