- 締切済み
SimplyScrollについて
初めて質問させて頂きます。私はホームページを作成する事を趣味としている者です。最近、あるホームページで画像が上から下に流れているのを見て感動し、どうしても自分でも同じ事をやってみたいと思い、色々と調べた結果、「SimplyScroll」というもので実現できる事を知りました。その内容のページの一つを例にあげさせて頂きます。 http://codesign.verse.jp/jquery/2009/08/simplyscroll.html のページの中で、３つの例（横移動&自動スライド&ボタンなし 、横移動&ボタンにマウスオーバーで画像スライド、縦移動&ボタンにマウスオーバーで画像スライド）は載っていたのですが、「縦移動&自動スライド&ボタンなし」という私が実現したいと思っている例が載っていなかったので、私なりに以下のようにやってみたのですが全く画像が上から下に動きません。 私がやった事はまず、このページでの解説通り、２つのjsファイルをダウンロードし、それからhead内への記述のところで horizontal:true, の「true」を「false」に変えました。それ以外のbody内への記述やcss内への記述もそのままです。ちなみに画像はこのぺーじと同じサイズのものを使用しています。javascriptの知識はあるほうではない私ですが、どなたか私の間違いをご指摘頂ければと。どうぞよろしくお願い致します。
- sakamo125
- お礼率0% (0/5)
- JavaScript
- 回答数5
- ありがとう数1
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
- yyr446
- ベストアンサー率65% (870/1330)
- babu_baboo
- ベストアンサー率51% (268/525)
ためしてないけど、そくとうで。 まず、 new AutoUpper( 'menu' ); を var menu = new AutoUpper( 'menu' ); にする。 <ul id="menu"> を <ul id="menu" onMouseover="menu.stop()" onMouseout="menu.start()"> に。 ためしてないけど、いまちょっとてなおしして、うえにもしたにも うごけるように、いじってます^^; ってところで、さいしょのしつもんにあった、らいぶらりは、どうでもよろしいのか？
補足
babu_baboo様、出来ました！本当にありがとうございます。最初の質問はもう無駄になりました。まさかbabu_baboo様のような達人がいらっしゃるとは夢にも思いませんでしたので。と申しますのも、私のやりたい最終形は、動く一つ一つの画像にマウスを乗せた時に例えばその横にあるメイン画像も同時に変えたいというものです。一度に質問しようとしましたら、私の頭が混乱してしまい、このように段階的な質問をしてしまう形になってしまい申し訳ございません。つまり、http://oshiete1.goo.ne.jp/qa3495988.html のページにあるのと今までbabu_baboo様に教えて頂いた事を合体させたものかもしれません。欲を言えば、メイン画面の画像は止まったままでなく一定の間隔で切り替われば最高です。私も今、色々とやってみたのですが、どうしてもアドバイスが頂ければと、申し訳ございません。よろしくお願い致します。
- babu_baboo
- ベストアンサー率51% (268/525)
ぜんかくくうはくをとりのぞいたじょうたいのもおのを おきます。うごかないなら、これはあきらめて、たのかいとうを まちましょう。 さいきんは、このまま、こぴぺでうごくようにかいているのだけどなぁ～ ちなみにこれは、さいきんこのちつもんのかいとうにかいたものを、 いじっただけなので、むだなところがあるかも？ http://okwave.jp/qa5497200.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> ul { width: 100px; height: 200px; list-style: none; border:1px #888 solid; overflow: auto; margin: 0; padding : 0; } ul li { height:100px; } li a img { border : 0px none; width : 100px; height : 100px; } </style> <body> <ul id="menu"> <li><a href="#"><img src="./img/0.gif" alt="*"></a></li> <li><a href="#"><img src="./img/1.gif" alt="*"></a></li> <li><a href="#"><img src="./img/2.gif" alt="*"></a></li> <li><a href="#"><img src="./img/3.gif" alt="*"></a></li> <li><a href="#"><img src="./img/4.gif" alt="*"></a></li> </ul> <hr> <ul id="menu2"> <li><a href="#"><img src="./img/0.gif" alt="*"></a></li> <li><a href="#"><img src="./img/1.gif" alt="*"></a></li> <li><a href="#"><img src="./img/2.gif" alt="*"></a></li> <li><a href="#"><img src="./img/3.gif" alt="*"></a></li> <li><a href="#"><img src="./img/4.gif" alt="*"></a></li> </ul> <script type="text/javascript"> //@cc_on var AutoUpper = function () { this.init.apply( this, arguments ); }; AutoUpper.prototype.init = function ( targetId, step, interval ) { var e = document.getElementById( targetId ); var cnt, o, s, h = 0; if( !e ) return false; e.style.overflow = 'hidden'; e.style.position = 'relative'; this.e = e; this.step = step || 2; this.interval = interval || 40; this.timerId = null; for( cnt = 0; o = e.childNodes[ cnt ]; ) { if( 1 == o.nodeType && 'LI' === o.nodeName ) { s = o.style; s.position = 'absolute'; s.top = h + 'px'; cnt++; h += o.offsetHeight; } else e.removeChild( o ); } this.max = h; this.lis = e.childNodes; this.start(); }; AutoUpper.prototype.start = function ( ) { this.timerId = setInterval( (function ( that ) { return function ( ) { that.roll(); }; })( this ), this.interval ); }; AutoUpper.prototype.stop = function ( ) { this.timerId && clearInterval( this.timerId ); this.timerId = null; }; AutoUpper.prototype.roll = function ( ) { var cnt = 0; var li; var s; var h; while( li = this.lis[ cnt++ ] ) { s = li.style; h = parseInt( s.top, 10) - this.step; if( -li.offsetHeight >= h ) h = this.max - li.offsetHeight; s.top = h + 'px'; } }; new AutoUpper( 'menu' ); new AutoUpper( 'menu2', 1,100 ); </script> </body> </html>
補足
babu_baboo様、度々のご回答ありがとうございます。出来ました！全て私のミスでした。本当にすみませんでした。お答え頂いた上にちょっとずうずうしいかと思いますが、ライブラリは、マウスオーバーで動きが止まるのですが、マウスオーバーで動きを止める事はできませんでしょうか？よろしくお願いします。
- babu_baboo
- ベストアンサー率51% (268/525)
らいぶらり～つかわなくても、よいのなら、じりきで！ （ぜんかくくうはくは、はんかくにしてちょ） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> ul { width: 100px; height: 200px; list-style: none; border:1px #888 solid; overflow: auto; margin: 0; padding : 0; } ul li { height:100px; } li a img { border : 0px none; width : 100px; height : 100px; } </style> <body> <ul id="menu"> <li><a href="#"><img src="./img/0.gif" alt="*"></a></li> <li><a href="#"><img src="./img/1.gif" alt="*"></a></li> <li><a href="#"><img src="./img/2.gif" alt="*"></a></li> <li><a href="#"><img src="./img/3.gif" alt="*"></a></li> <li><a href="#"><img src="./img/4.gif" alt="*"></a></li> </ul> <hr> <ul id="menu2"> <li><a href="#"><img src="./img/0.gif" alt="*"></a></li> <li><a href="#"><img src="./img/1.gif" alt="*"></a></li> <li><a href="#"><img src="./img/2.gif" alt="*"></a></li> <li><a href="#"><img src="./img/3.gif" alt="*"></a></li> <li><a href="#"><img src="./img/4.gif" alt="*"></a></li> </ul> <script type="text/javascript"> //@cc_on var AutoUpper = function () { this.init.apply( this, arguments ); }; AutoUpper.prototype.init = function ( targetId, step, interval ) { var e = document.getElementById( targetId ); var cnt, o, s, h = 0; if( !e ) return false; e.style.overflow = 'hidden'; e.style.position = 'relative'; this.e = e; this.step = step || 2; this.interval = interval || 40; this.timerId = null; for( cnt = 0; o = e.childNodes[ cnt ]; ) { if( 1 == o.nodeType && 'LI' === o.nodeName ) { s = o.style; s.position = 'absolute'; s.top = h + 'px'; cnt++; h += o.offsetHeight; } else e.removeChild( o ); } this.max = h; this.lis = e.childNodes; this.start(); }; AutoUpper.prototype.start = function ( ) { this.timerId = setInterval( (function ( that ) { return function ( ) { that.roll(); }; })( this ), this.interval ); }; AutoUpper.prototype.stop = function ( ) { this.timerId && clearInterval( this.timerId ); this.timerId = null; }; AutoUpper.prototype.roll = function ( ) { var cnt = 0; var li; var s; var h; while( li = this.lis[ cnt++ ] ) { s = li.style; h = parseInt( s.top, 10) - this.step; if( -li.offsetHeight >= h ) h = this.max - li.offsetHeight; s.top = h + 'px'; } }; new AutoUpper( 'menu' ); new AutoUpper( 'menu2', 1,100 ); </script> </body> </html>
補足
babu_baboo様、ご返答ありがとうございます。結論からなんですが、babu_baboo様のご解説通り、縦100px横100pxの画像を(1.gif)(2.gif)(3.gif)(4.gif)(5.gif)と５個作り、全角空白を半角にし、全くご指摘通り、実行してみましたが、できませんでした。どこがどういう風にできないかと言いますと、画像が五個縦に並んだ状態で、画像の縦横と周囲にスクロールバーが出て、画像も動かずそのままです。色々とアドバイス頂きながら、すみませんがよろしくお願い致します。
補足
babu_baboo様は私から見れば、「達人」でもあり、一応、女性なので「立人」かなと思います。私のために色々つくして頂いたので、つい甘えてしまいました。私なりに勉強しながらチャレンジみたのですが、残念です。今回はありがとうございました。