- ベストアンサー
jQuery faux-3D Viewportコンテンツ内でもスライド
jQuery faux-3D Viewportコンテンツ内でもスライドさせたい jQuery faux-3D Viewport http://www.skuare.net/test/jfaux3D.html のカスタマイズで質問です。 1～9ボタンの操作に加え、 <div class="slide-wrap"></div> の中にリンクを張ってページスライドさせたいのですが、 JSの記述方法が分かりません。 そもそも実現できるのかどうかもわからないのですが、 ご教授いただけないでしょうか？
- pzq11111
- お礼率50% (3/6)
- JavaScript
- 回答数3
- ありがとう数11
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
別に問題ないと思います。 要はboxNにスライド先の要素配列番号をセットして function shiftBoxes(boxN){}をCALLするだけです。 （サンプルが短いので全部貼れそう） ※全角空白は半角空白にしてね！ <style type="text/css"> #panel {width:1800px; height:1800px; position:absolute;} .slide-wrap {float:left; width:520px; height:320px; margin:10px; border:30px solid #DDD;} #enclosure {width:600px; height:400px;overflow:hidden; position:relative;} </style> <script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.4.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="/jslib/jquery.easing.1.3.js"></script> <script type="text/javascript"> $(document).ready(function() { var shiftSpeed = 1500; //スライドスピード var SlideWidth = 600; //スライドの大きさ var SlideHeight = 400; //スライドの幅 var columnCount = 3; //縦列の数 var rowCount = 3; //横列の数 $("ul#nav li a").click( function() { navIndex = $("ul#nav li a").index(this); shiftBoxes( navIndex ); }); //ここを追加 $("#nav2 a").click(function(){ shiftBoxes(Number(this.hash.replace('#',''))-1); }); //ここまで function shiftBoxes(boxN) { var col = ( (boxN) % rowCount ) * -1; var row = Math.floor( (boxN) / columnCount ) * -1; $("#panel").stop().animate({ left: SlideWidth * col, top: SlideHeight * row }, shiftSpeed, "easeInOutCubic"); } }); </script> </head> <body> <p> <h3>斜めにスクロール</h3> <div id="enclosure"> <div id="panel"> <div class="slide-wrap">1<div id="nav2"><a href="#9">9へ飛ぶ</a></div></div> <div class="slide-wrap">2</div> <div class="slide-wrap">3</div> <div class="slide-wrap">4</div> <div class="slide-wrap">5</div> <div class="slide-wrap">6</div> <div class="slide-wrap">7</div> <div class="slide-wrap">8</div> <div class="slide-wrap">9</div> </div> </div> <ul id="nav"> <li><a href="#1">1</a></li> <li><a href="#2">2</a></li> <li><a href="#3">3</a></li> <li><a href="#4">4</a></li> <li><a href="#5">5</a></li> <li><a href="#6">6</a></li> <li><a href="#7">7</a></li> <li><a href="#8">8</a></li> <li><a href="#9">9</a></li> </ul> </p> </body> </html>
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
おっと、id重複はおこられるから、 <div class="slide-wrap">1<div class="nav2"><a href="#9">9へ飛ぶ</a></div></div> にして $(".nav2 a").click(function(){ shiftBoxes(Number(this.hash.replace('#',''))-1); }); の方がよいかも．．
- fujillin
- ベストアンサー率61% (1594/2576)
斜めに見ただけですが… shiftBoxes（）に表示したいboxのindex番号を与えてあげれば良いみたいですね。 onclick ="shiftBoxes(8);" みたいなことで可能そうですが、shiftBoxが関数の中にあるので（↑）のままではアクセスできないはず。 手っ取り早く行なうなら、(↑)のonclickの設定を（navに設定しているのと同じように）関数の中で設定してあげればよいのでは？ $( selector ).click( function() { shiftBoxes(番号); }); みたいな感じ。 （未検証です）
お礼
早急なご回答に感謝いたします。 無事、稼動することができました。 ありがとうございました。
お礼
早急なご回答ありがとうございました。 早速、試してみたところ、無事稼動しました。 ソースまで記述していただいて恐縮です。 ほんとにありがとうございました！