- ベストアンサー
ulとliを指定し横に並べて
テキスト2行、5個のリストをHTMLとCSSとjavascriptでulとliを指定し横に並べて、 2秒間1個のテキストのリストで止まって2秒たったら次のテキストのリストに動く スクリプトの作り方が知りたいです。
- basi999
- お礼率7% (78/993)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （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 () { 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>
その他の回答 (2)
- babu_baboo
- ベストアンサー率51% (268/525)
＃１です。れんとう！ べじぇきょくせんを、うごきにとりいれてみる <!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>
- babu_baboo
- ベストアンサー率51% (268/525)
<!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> -- ＞動く うごいてませんね ぜんかくくうはくは、はんかくにしてください。
