![](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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS リストの並べ替え 1 2022/09/13 15:27
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- その他(プログラミング・Web制作) pythonリストの特定の値を表示htmlで表示できない 2 2022/05/14 05:48
- Excel(エクセル) 範囲指定をした中で、住所の列をユーザー設定の並べ替えをしたい 3 2022/05/15 13:51
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- 大学・短大 C言語線形リストの問題です 3 2022/12/22 00:45
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ローカルにあるファイルを検索...
-
googleスプレッドシートのApps ...
-
C#OpenCv V4にのエラーに関する...
-
なぜmatchメソッドがエラーにな...
-
google apps scriptの終了のさせ方
-
テーブルセル内のinput要素のna...
-
GASでundefinedエラーが出ます
-
シンプルなweb版スタンプラリー...
-
イラレでナンバリングする方法
-
C言語の質問です HTMLでこのよ...
-
この将棋プログラムに王様ゲッ...
-
javaScript textareaの一行あた...
-
gas スプレッドシートがアクテ...
-
VSCODE[Python]の設定について
-
翌月を取得するGASが分かりません
-
四捨五入について
-
javascriptでテーブルに追加し...
-
Jscriptからのオープン
-
ASP.NET MVCでObjectをjsに渡す
-
C#で、ContextMenuStripに動的...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
なぜmatchメソッドがエラーにな...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
html javascript リンク先アド...
-
gas スプレッドシートがアクテ...
-
翌月を取得するGASが分かりません
-
ASP.NETのコントロールの値をJa...
-
C# 演算 奇数と偶数 表現の仕方
-
javascriptでiframeのURL変更は?
-
C#で、ContextMenuStripに動的...
-
ASP.NET MVCでObjectをjsに渡す
-
1日1回引けるJavaScriptおみく...
-
javascriptでテーブルに追加し...
-
JavaScriptを使って毎日決まっ...
-
googleスプレッドシートのApps ...
-
JavaScriptで文字列の特定文字...
-
アクセス時からのカウントダウ...
-
ローカルにあるファイルを検索...
おすすめ情報