- 締切済み
自動でスライドし、伸び縮みするボックスを作りたい。
自動でスライドし、伸び縮みするボックスを作りたい。 ソフトバンクの携帯用トップページ（http://mb.softbank.jp/mb/）の「キャンペーン・イベント情報」の部分のように、ボックス内の内容を自動でスライドさせ、全てを見るを押すとボックスが広がり内容が全て見えると云うような事をやりたいのですが、どうやるのでしょうか？ jQueryを使用していると言う事はなんとなくわかるのですが・・・ プログラミング初心者なので、ホームページのソースのどの部分が関係しているのかなど詳しく教えて頂けると幸いです。 よろしくお願いします。
- akito-1
- お礼率37% (10/27)
- JavaScript
- 回答数2
- ありがとう数13
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- steel_gray
- ベストアンサー率66% (1052/1578)
#1の続き（JSファイルの中身） function scrCtr(id,options){ var opt = { id:'', btnClsOpen:'.open',//表示ボタン btnClsClose:'.close',//閉じるボタン height:240,//スクロール範囲 val:80,//一回のスクロール量 interval:3000, //スクロール間隔(ミリ秒) pos:0, timerId:0 }; opt.id = id; for(var x in options) { opt[x] = options[x]; } opt.timerId = setInterval(scrBlock,opt.interval); function scrBlock(){ opt.pos += opt.val; if(opt.height <= opt.pos){ opt.pos = 0; $(opt.id+' div').animate({ duration:'fast', top:opt.pos }); } else { $(opt.id+' div').animate({ duration:'slow', top:- opt.pos }); } } $(opt.id +' '+ opt.btnClsOpen).click(function(){ clearInterval(opt.timerId); $(opt.id+' div').stop(); opt.pos = 0; $(opt.id+' div').css('top',0); $(opt.id).animate({ duration:'slow', height:$(opt.id+' div').height() }); $(this).hide(); $(opt.id +' '+ opt.btnClsClose).show(); }); $(opt.id+' '+opt.btnClsClose).click(function(){ $(opt.id).animate({ duration:'slow', height:opt.val }); $(this).hide(); $(opt.id +' '+ opt.btnClsOpen).show(); opt.timerId = setInterval(scrBlock,opt.interval); }); }
- steel_gray
- ベストアンサー率66% (1052/1578)
結構いい加減ですが一応サンプル（文字数制限のため２回に分けます） <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> a img { border:none; } #sample { width:730px; height:80px; overflow:hidden; border:solid thin black; position:relative; } #sample div{ position:absolute; top:0; left:0; width:640px; padding:0 0 0 5px; } #sample div p{ text-align:right; margin:0; padding:0 10px 10px 0; } #sample ul{ margin:0; padding:0; list-style-type:none; } #sample li{ float:left; margin:10px 5px; } #sample li img{ vertical-align:top; } #sample ul + *{ clear:both; } .button { position:absolute; margin:0; top:10px; right:10px; cursor:pointer; } .close { display:none; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="【JSファイル】"></script> <script type="text/javascript"> $(function(){ new scrCtr('#sample',{ btnClsOpen:'.open',//表示ボタン btnClsClose:'.close',//閉じるボタン height:240,//スクロール範囲 val:80,//一回のスクロール量 interval:5000 //スクロール間隔(ミリ秒) }); }); </script> </head> <body> <div id="sample"> <div> <ul> <li><a href=""><img src="_img/aaa.jpg" alt="" width="200" height="60"></a></li> <li><a href=""><img src="_img/bbb.jpg" alt="" width="200" height="60"></a></li> <li><a href=""><img src="_img/ccc.jpg" alt="" width="200" height="60"></a></li> <li><a href=""><img src="_img/aaa.jpg" alt="" width="200" height="60"></a></li> <li><a href=""><img src="_img/bbb.jpg" alt="" width="200" height="60"></a></li> <li><a href=""><img src="_img/ccc.jpg" alt="" width="200" height="60"></a></li> <li><a href=""><img src="_img/aaa.jpg" alt="" width="200" height="60"></a></li> </ul> <p><a href="">その他</a></p> </div> <p class="button"><img src="" class="open" alt="全て表示" width="60" height="60"> <img src="" class="close" alt="閉じる" width="60" height="60"></p> </div> </body> </html>
