SimplyScrollについて

締切済

質問者：sakamo125
質問日時：2009/12/08 08:46
回答数：5件

初めて質問させて頂きます。私はホームページを作成する事を趣味としている者です。最近、あるホームページで画像が上から下に流れているのを見て感動し、どうしても自分でも同じ事をやってみたいと思い、色々と調べた結果、「SimplyScroll」というもので実現できる事を知りました。その内容のページの一つを例にあげさせて頂きます。
http://codesign.verse.jp/jquery/2009/08/simplysc …　のページの中で、３つの例（横移動&自動スライド&ボタンなし
、横移動&ボタンにマウスオーバーで画像スライド、縦移動&ボタンにマウスオーバーで画像スライド）は載っていたのですが、「縦移動&自動スライド&ボタンなし」という私が実現したいと思っている例が載っていなかったので、私なりに以下のようにやってみたのですが全く画像が上から下に動きません。
私がやった事はまず、このページでの解説通り、２つのjsファイルをダウンロードし、それからhead内への記述のところで　horizontal:true,　の「true」を「false」に変えました。それ以外のbody内への記述やcss内への記述もそのままです。ちなみに画像はこのぺーじと同じサイズのものを使用しています。javascriptの知識はあるほうではない私ですが、どなたか私の間違いをご指摘頂ければと。どうぞよろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： babu_baboo
回答日時：2009/12/08 17:26

ごかいがないように。

わたくしね、たつじんじゃなくてよ！
おとこなので、「立人」なら、まぁ～それならば・・・・。^^;

まぁ～ひよっこが、ちょろちょろ、ごみにちかいようなものを
べんきょうがてら、まきちらしているとおもってくださいな。

うえにはうえが、うようよいるようだし。
「専門家」より、すごいとおもう「経験者」とか・・・^^;

この回答への補足

babu_baboo様は私から見れば、「達人」でもあり、一応、女性なので「立人」かなと思います。私のために色々つくして頂いたので、つい甘えてしまいました。私なりに勉強しながらチャレンジみたのですが、残念です。今回はありがとうございました。

補足日時：2009/12/08 18:54

通報する

- 0
- 件

通報する

No.4

回答者： yyr446
回答日時：2009/12/08 16:32

ライブラリーを使う時は、あやしい設置メモのページなんかじゃなくて、

なるべく本家のページをよく読みましょう。ここ
http://logicbox.net/jquery/simplyscroll/
「縦移動&自動スライド&ボタンなし」できますよ。
素直にデフォルトのCSSをつみましょう。
「縦移動&自動スライド&ボタンなし」の例
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>ほげほげ</title>
<link type="text/css" href="jquery.simplyscroll-1.0.4.css" rel="stylesheet" />
<style type="text/css"></style>
<script type="text/javascript" src="/jquery-1.3.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="/jquery.simplyscroll-1.0.4.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">

</script>
</head>
<body>
－－－－－－－－－－－－－－－－－－
<ul id="myscroll">
<li><img src="hoge.png" width=200 height=200></li>
<li><img src="fuga..png" width=200 height=200></li>
－－－－－－－－－－－－－－－－－－
</ul>
－－－－－－－－－－－－－－－－－－
</body>
</html>

- 0
- 件

通報する

No.3

回答者： babu_baboo
回答日時：2009/12/08 16:03

ためしてないけど、そくとうで。

まず、
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様に教えて頂いた事を合体させたものかもしれません。欲を言えば、メイン画面の画像は止まったままでなく一定の間隔で切り替われば最高です。私も今、色々とやってみたのですが、どうしてもアドバイスが頂ければと、申し訳ございません。よろしくお願い致します。

補足日時：2009/12/08 16:47

通報する

- 0
- 件

通報する

No.2

回答者： babu_baboo
回答日時：2009/12/08 14:00

ぜんかくくうはくをとりのぞいたじょうたいのもおのを

おきます。うごかないなら、これはあきらめて、たのかいとうを
まちましょう。

さいきんは、このまま、こぴぺでうごくようにかいているのだけどなぁ～

ちなみにこれは、さいきんこのちつもんのかいとうにかいたものを、
いじっただけなので、むだなところがあるかも？
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様、度々のご回答ありがとうございます。出来ました！全て私のミスでした。本当にすみませんでした。お答え頂いた上にちょっとずうずうしいかと思いますが、ライブラリは、マウスオーバーで動きが止まるのですが、マウスオーバーで動きを止める事はできませんでしょうか？よろしくお願いします。

補足日時：2009/12/08 15:36

通報する

- 0
- 件

通報する

No.1

回答者： babu_baboo
回答日時：2009/12/08 10:14

らいぶらり～つかわなくても、よいのなら、じりきで！

（ぜんかくくうはくは、はんかくにしてちょ）
<!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)と５個作り、全角空白を半角にし、全くご指摘通り、実行してみましたが、できませんでした。どこがどういう風にできないかと言いますと、画像が五個縦に並んだ状態で、画像の縦横と周囲にスクロールバーが出て、画像も動かずそのままです。色々とアドバイス頂きながら、すみませんがよろしくお願い致します。

補足日時：2009/12/08 12:23

通報する