初めて質問させて頂きます。私はホームページを作成する事を趣味としている者です。最近、あるホームページで画像が上から下に流れているのを見て感動し、どうしても自分でも同じ事をやってみたいと思い、色々と調べた結果、「SimplyScroll」というもので実現できる事を知りました。その内容のページの一つを例にあげさせて頂きます。
http://codesign.verse.jp/jquery/2009/08/simplysc … のページの中で、3つの例(横移動&自動スライド&ボタンなし
、横移動&ボタンにマウスオーバーで画像スライド、縦移動&ボタンにマウスオーバーで画像スライド)は載っていたのですが、「縦移動&自動スライド&ボタンなし」という私が実現したいと思っている例が載っていなかったので、私なりに以下のようにやってみたのですが全く画像が上から下に動きません。
私がやった事はまず、このページでの解説通り、2つのjsファイルをダウンロードし、それからhead内への記述のところで horizontal:true, の「true」を「false」に変えました。それ以外のbody内への記述やcss内への記述もそのままです。ちなみに画像はこのぺーじと同じサイズのものを使用しています。javascriptの知識はあるほうではない私ですが、どなたか私の間違いをご指摘頂ければと。どうぞよろしくお願い致します。
A 回答 (5件)
- 最新から表示
- 回答順に表示
No.5
- 回答日時:
ごかいがないように。
わたくしね、たつじんじゃなくてよ!
おとこなので、「立人」なら、まぁ~それならば・・・・。^^;
まぁ~ひよっこが、ちょろちょろ、ごみにちかいようなものを
べんきょうがてら、まきちらしているとおもってくださいな。
うえにはうえが、うようよいるようだし。
「専門家」より、すごいとおもう「経験者」とか・・・^^;
この回答への補足
babu_baboo様は私から見れば、「達人」でもあり、一応、女性なので「立人」かなと思います。私のために色々つくして頂いたので、つい甘えてしまいました。私なりに勉強しながらチャレンジみたのですが、残念です。今回はありがとうございました。
補足日時:2009/12/08 18:54No.4
- 回答日時:
ライブラリーを使う時は、あやしい設置メモのページなんかじゃなくて、
なるべく本家のページをよく読みましょう。ここ
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">
<!--
$(function(){
$("#myscroll").simplyScroll({
autoMode:'loop',
speed:1,
frameRate:20,
horizontal:false
});
});
// -->
</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>
No.3
- 回答日時:
ためしてないけど、そくとうで。
まず、
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:47No.2
- 回答日時:
ぜんかくくうはくをとりのぞいたじょうたいのもおのを
おきます。うごかないなら、これはあきらめて、たのかいとうを
まちましょう。
さいきんは、このまま、こぴぺでうごくようにかいているのだけどなぁ~
ちなみにこれは、さいきんこのちつもんのかいとうにかいたものを、
いじっただけなので、むだなところがあるかも?
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:36No.1
- 回答日時:
らいぶらり~つかわなくても、よいのなら、じりきで!
(ぜんかくくうはくは、はんかくにしてちょ)
<!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)と5個作り、全角空白を半角にし、全くご指摘通り、実行してみましたが、できませんでした。どこがどういう風にできないかと言いますと、画像が五個縦に並んだ状態で、画像の縦横と周囲にスクロールバーが出て、画像も動かずそのままです。色々とアドバイス頂きながら、すみませんがよろしくお願い致します。
補足日時:2009/12/08 12:23お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
同一ページ内の複数のタグに同...
-
ジャバスクリプトでクリックし...
-
MAX関数を使ってからLEFT JOIN...
-
表示・非表示のスクリプトで、...
-
removeEventListenerについて
-
createElementで作成した要素を...
-
大分類・中分類・小分類
-
WEBページ立ち上げ時に1回のみ...
-
画像をアップするディレクトリ...
-
MFCで画像を表示させているので...
-
オンマウス時に別画像を上に重...
-
console.log結果をhtmlで表示し...
-
window.openで値の渡し方を教え...
-
日替わりで画像を変更したい
-
JSで動的にリンクを作成
-
2階層のメニューを作ってjQuery...
-
JavaScriptで変更した属性の元...
-
1枚の画像をクリックすると複数...
-
javascriptで毎月替わる画像
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
画像をフェードアウト&フェー...
-
チェックボックスで画像を一括表示
-
[jQuery]bxSlider 一番最後と...
-
jsでグリッドデザインのサムネ...
-
【jQuery】2分割レイアウトで、...
-
liの数によってulの横幅を動的...
-
同一ページ内の複数のタグに同...
-
jqueryサブウィンドウにて画像...
-
神経衰弱 順番に裏返し
-
Javaスクリプトで画像を縦にス...
-
一定時間ごとに画像を切り替え...
-
横並びの画像を3枚時間差でフェ...
-
Javascriptを使用したスライド...
-
順番にクラスをつけていく方法
-
bxSliderのランダム表示について
-
html5に変えるとスライドショー...
-
エンドロールを枠の中で表示す...
-
javascriptで吹き出し
-
ご教授ください。
おすすめ情報