![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
No.2ベストアンサー
- 回答日時:
#1です。
「動く」とは?こんなん?
<!DOCTYPE html>
<meta charset="UTF-8">
<title>動く?</title>
<style>
ol#hoge {
width : 800px;
height : 82px;
overflow : hidden;
}
#hoge li {
width : 198px;
border : 1px red solid;
height : 80px;
display : inline-block;
overflow : hidden;
}
</style>
<body>
<ol id="hoge">
<li>
abc<br>
def
<li>
ghi<br>
jkl
<li>
mno<br>
pqr
<li>
stu<br>
vwx
<li>
yzA<br>
BCD
</ol>
<script>
(function () {
var parent = document.getElementById ('hoge');
var interval = [2000, 20];
var mode = 0;
var width = 200;
var step = 4;
var c = parent.childNodes;
var i = c.length;
var e;
for (; e = c[--i]; )
if (1 !== e.nodeType)
parent.removeChild (e);
var x;
function LOOP () {
var e = parent.firstChild;
var t = null;
switch (mode) {
case 0 :
x = 0;
setTimeout (LOOP, interval[mode]);
mode = 1;
break;
case 1 :
x -= step;
if (x < -width) {
x = 0;
mode = 0;
parent.appendChild (e);
}
e.style.marginLeft = x + 'px';
setTimeout (LOOP, interval[mode]);
}
}
LOOP ();
}) ();
</script>
No.3
- 回答日時:
#1です。
れんとう!べじぇきょくせんを、うごきにとりいれてみる
<!DOCTYPE html>
<meta charset="UTF-8">
<title>ベジェ曲線を利用して動く</title>
<style>
ol#hoge {
width : 800px;
height : 82px;
overflow : hidden;
}
#hoge li {
width : 198px;
border : 1px red solid;
height : 80px;
display : inline-block;
overflow : hidden;
}
</style>
<body>
<ol id="hoge">
<li>
abc<br>
def
<li>
ghi<br>
jkl
<li>
mno<br>
pqr
<li>
stu<br>
vwx
<li>
yzA<br>
BCD
</ol>
<script>
function BG(a,b,c,d){var e=3*a,f=3*(c-a)-e,g=3*b,h=1-e-f,i=3*(d-b)-g,j=1-g-i;return function(a){for(var b=a,c=5,d;c--;)if(.001<Math.abs(d=b*(e+b*(f+b*h))-a))b-=d/(e+b*(2*f+3*h*b));return((b*j+i)*b+g)*b}};
(function () {
var parent = document.getElementById ('hoge');
var interval = [2000, 20];
var mode = 0;
var width = 200;
var step = .01;
var bz = BG.apply (null, [0, 0, 0.28, 1]);
var c = parent.childNodes;
var i = c.length;
var e;
for (; e = c[--i]; )
if (1 !== e.nodeType)
parent.removeChild (e);
var x;
function LOOP () {
var e = parent.firstChild;
var ml;
switch (mode) {
case 0 :
x = 0;
setTimeout (LOOP, interval[mode]);
mode = 1;
break;
case 1 :
x += step;
if (1 < x) {
x = 1;
mode = 0;
parent.appendChild (e);
ml = 0;
}
else {
ml = (-bz (x) * width |0);
}
e.style.marginLeft = ml + 'px';
setTimeout (LOOP, interval[mode]);
}
}
LOOP ();
}) ();
</script>
No.1
- 回答日時:
<!DOCTYPE html>
<meta charset="UTF-8">
<title>瞬間移動?</title>
<style>
ol#hoge {
width : 800px;
height : 82px;
overflow : hidden;
}
#hoge li {
width : 198px;
border : 1px red solid;
height : 80px;
display : inline-block;
overflow : hidden;
}
</style>
<body>
<ol id="hoge">
<li>
abc<br>
def
<li>
ghi<br>
jkl
<li>
mno<br>
pqr
<li>
stu<br>
vwx
<li>
yzA<br>
BCD
</ol>
<script>
(function () {
var parent = document.getElementById ('hoge');
var interval = 2000;
var c = parent.childNodes;
var i = c.length;
var e;
for (var e; e = c[--i]; )
if (1 !== e.nodeType)
parent.removeChild (e);
function LOOP () {
var e = parent.firstChild;
parent.appendChild (e);
}
setInterval (LOOP, interval);
}) ();
</script>
--
>動く
うごいてませんね
ぜんかくくうはくは、はんかくにしてください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
C#OpenCv V4にのエラーに関する...
-
なぜmatchメソッドがエラーにな...
-
JAVASCRIPTで万年カレンダーを...
-
テーブルセル内のinput要素のna...
-
JavaScriptでテーブル内?に矢...
-
明日・明後日・明々後日
-
C# 演算 奇数と偶数 表現の仕方
-
ジェネレーターの作り方
-
翌月を取得するGASが分かりません
-
カンマで終わってるのはセミコ...
-
google apps scriptの終了のさせ方
-
GASのエラー「undefined からプ...
-
HTMLにWSHを組み込む
-
スロットマシン風の表示
-
for文での変数宣言について(他...
-
アクロバットのスクリプトで連...
-
コンテンツを上下に動かすには
-
C#で、ContextMenuStripに動的...
-
GASについて
-
船のゲームを作っているのです...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
この将棋プログラムに王様ゲッ...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
翌月を取得するGASが分かりません
-
なぜmatchメソッドがエラーにな...
-
gas スプレッドシートがアクテ...
-
C#で、ContextMenuStripに動的...
-
ローカルにあるファイルを検索...
-
VSCODE[Python]の設定について
-
JavaScriptで、現在日時から100...
-
JavaScriptで文字列の特定文字...
-
イベントが初めの一回しか起き...
-
javascriptでテーブルに追加し...
-
シンプルなweb版スタンプラリー...
-
javascriptでiframeのURL変更は?
-
ASP.NETのコントロールの値をJa...
-
ASP.NET MVCでObjectをjsに渡す
-
googleスプレッドシートのApps ...
おすすめ情報