初めて質問させて頂きます。私はホームページを作成する事を趣味としている者です。最近、あるホームページで画像が上から下に流れているのを見て感動し、どうしても自分でも同じ事をやってみたいと思い、色々と調べた結果、「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/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
チェックボックスと画像切替の連動
-
html5に変えるとスライドショー...
-
Jquery の slide.toggle で要素...
-
画像転送(ワールド変換行列)...
-
jQueryのアコーディオンメニュ...
-
jqueryのsortableで一部ソート...
-
ドロップダウンリストの高さを...
-
フッター上部に謎の隙間
-
Javaスクリプトに関して分から...
-
jQueryのeqで最後からn番目以降...
-
現在のウィンドウのままリンク...
-
ツリー型メニューについて
-
c++std::string型をTCHARに変換...
-
画像をクリックすると音が鳴り...
-
removeEventListenerについて
-
createElementで作成した要素を...
-
1つ1つの画像にイベントを発生...
-
Notice:Undefined index が。
-
CSS <div>の入れ子が反映さ...
-
MAX関数を使ってからLEFT JOIN...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
チェックボックスと画像切替の連動
-
キャラクターがぴょこんと飛び...
-
チェックボックスで画像を一括表示
-
bxSliderのランダム表示について
-
javascript 神経衰弱
-
fontsize.jsでhtmlの大中小の設...
-
ジャバスクリプトでクリックし...
-
javascript setTimeout
-
リモートロールオーバーを教え...
-
JQueryを使ってcssを書き換え
-
qtipの使い方について
-
Dreamweaver上とデバイスプレビ...
-
jquery 要素数に応じたwidthの...
-
横並びの画像を3枚時間差でフェ...
-
スライドショー「Skitter」をカ...
-
JavaScriptかPHPを使って表示枚...
-
jqueryを使ってポップアップを...
-
Flickrのような綺麗なサムネイ...
おすすめ情報