- 締切済み
複数の写真がマウスで左右に移動するスライドショー
初めて質問させて頂きます！ 自力でどうしても見つけることができませんでしたので、 コード等に詳しい方に是非教えて頂きたいです。。。！ http://www.flandre.ne.jp/30th/ こちらのサイトのように、写真のサムネイルが横に並んでおり、 マウスの動きに連動して左右に動いて、 マウスオーバーで画像が変わるようなスライドショーを Flash以外（Javascript等）で作りたいと思っております。 このような動きのサンプルのURLやコードのページがあれば 是非教えて頂けませんでしょうか・・・！ 何卒よろしくお願いいたします。。！！！
- gooyay
- お礼率0% (0/5)
- JavaScript
- 回答数5
- ありがとう数0
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
---つづき--- ・当方のブラウザは古いので、クラスｐ1、ｐ2を用いていますが、最近のブラウザなら nth-childが使えるので、クラス設定も不要かと思います。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> body{ background-color:#444; } div#sample{ height:280px; overflow:hidden; margin-top:200px; position:relative; } #sample ul, #sample ul li{ list-style-type:none; margin:0; padding:0; } #sample ul{ position:absolute; } #sample li{ width:178px; height:278px; float:left; position:relative; overflow:hidden; border:1px solid #000; border-color:#888 #000 #000 #888; } #sample li div{ width:100%; height:100%; text-align:center; position:absolute; top:0; left:0; padding-top:100px; cursor:pointer; } #sample li div.p1{ font-size:4.5em; background-color:#aaa; } #sample li div.p2{ color:#fff; font-size:2.5em; background-color:#666; } </style> </head> <body> <div id="sample"> <ul> <li><div class="p1">01</div><div class="p2">image01</div></li> <li><div class="p1">02</div><div class="p2">image02</div></li> <li><div class="p1">03</div><div class="p2">image03</div></li> <li><div class="p1">04</div><div class="p2">image04</div></li> <li><div class="p1">05</div><div class="p2">image05</div></li> <li><div class="p1">06</div><div class="p2">image06</div></li> <li><div class="p1">07</div><div class="p2">image07</div></li> <li><div class="p1">08</div><div class="p2">image08</div></li> <li><div class="p1">09</div><div class="p2">image09</div></li> <li><div class="p1">10</div><div class="p2">image10</div></li> <li><div class="p1">11</div><div class="p2">image11</div></li> <li><div class="p1">12</div><div class="p2">image12</div></li> </ul> </div> <script type="text/javascript"> (function(){ var Slider = function(id){ init.call(this, id); }; Slider.prototype.handler = function(evt){ var t = evt.target || evt.srcElement; if(t.className != "p1" && this.hidden){ this.hidden.style.visibility = "visible"; this.hidden = null; } if(t.className == "p2"){ t.style.visibility = "hidden"; this.hidden = t; } var w = this.box.clientWidth; var n = (evt.clientX * 10 - w) * this.n / w / 8 | 0; n = (n >= this.n)?(this.n - 1):(0 > n?0:n); if(n != this.target) this.target = n; else return; var item = this.items[n]; var minPos = w - this.element.clientWidth; if(minPos>0) minPos = 0; var left = w/2 - item.offsetLeft - item.clientWidth/2 | 0; left = Math.max(Math.min(left, 0), minPos); animate(this, left); } var animate = function(obj, end){ clearInterval(obj.Id); var pos = obj.position; var dir = pos - end > 0?-1:1; obj.Id = setInterval(function(){ var step = Math.sqrt(Math.abs(end - pos)/8) | 0; if(step<1) step = 1; pos += dir * step; if((0>dir && end>=pos) || (dir>=0 && pos>=end)) pos = end; obj.element.style.left = pos + "px"; obj.position = pos; if(pos==end) clearInterval(obj.Id); }, 30); } var init = function(id){ var box = this.box = document.getElementById(id); var ul = this.element = box.getElementsByTagName("ul")[0]; box.style.width = "3000px"; var position = ul.clientWidth; ul.style.width = position + "px"; box.style.width = ""; position = Math.min(((box.clientWidth - position)/2 | 0), 0); this.position = position; ul.style.left = position + "px"; this.items = ul.getElementsByTagName("li"); this.n = this.items.length; this.target = 0; this.hidden = this.Id = null; } var slider = new Slider("sample"); /*@cc_on@*/ document./*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/'mousemove', function(evt){ slider.handler(evt); }, false); })(); </script> </body> </html>
- fujillin
- ベストアンサー率61% (1594/2576)
A No1、3です。 どなたかが回答なさるかと思っていたのですが… 移動のしかたが普通のスライドショーなどとは異なるので、サンプルはあまりないのではないかと思います。 考え方や方法もいろいろあると思いますので、雰囲気だけのサンプルです。 （あくまでもサンプルなので、細かなところはいい加減です） ・画像までを付けられないので、画像の部分は<div>で代用しています。 （HTMLによってはCSS等の調整が必要になります。） ・画面の幅の中央部80％の部分を画像枚数で分割し、マウス位置に対応する 画像を中央近くに表示するように移動させています。（端部の画像がある限り） ・hoverのイベント処理をmousemoveで兼用して拾っていますので、画像上にマウス を固定している時に画像移動の結果hover状態が変わっても反応しません。 （反応させるのなら、mouseoverなどでイベントを別に処理してください） ・移動する量に応じて、若干の速度調整を行なうようにしています。（easing） ・クリックした際の処理が不明なので、クリックには何も対応していません。 ・画面をリサイズしてもフォローできるはずですが、瞬時対応にはなっていません。 （リサイズイベントを監視してはいないので） （全角空白は半角に） …と思ったら文字数オーバーになってしまったので、次に続きます。
- fujillin
- ベストアンサー率61% (1594/2576)
A No1です。 ＞トップページではなくてその先に進んだページのことだと思いますよ そうでしたか。 失礼しました。勘違いしてしまったようですね。 質問者様にはスルーしてくださるようお願いします。 ＞ちなみに回転程度ならCSSで超楽にできます 投稿してから、CSSもあったと思い出しましたが、CSSで回転できるブラウザのユーザ割合はまだそれほどでもないのかなと思ったこともあって、連投しなかったというのもあります。（←言い訳）
- b0a0a
- ベストアンサー率49% (156/313)
＞＞回答者１さん トップページではなくてその先に進んだページのことだと思いますよ ちなみに回転程度ならCSSで超楽にできます
補足
補足下さり、誠にありがとうございます！！
- fujillin
- ベストアンサー率61% (1594/2576)
＞マウスの動きに連動して左右に動いて、 御提示のサンプルでは画像がそれぞれ別方向に回転していますが、『左右に動いて』とは違うように見えますが… 左右に動くだけなら普通によくあるスクリプトを（画像ごとに違う方向に？）適用すればよろしいかと。 回転はちょっと面倒かも知れません。 検索してみると、これまでのスクリプトではjQueryベースのこんな（↓）ライブラリがありました。 http://code.google.com/p/jqueryrotate/ アニメーションにも対応している様なので、個々の画像を回転させればよろしいかと。 あるいは、HTML5であればcanvasが使えるので回転も比較的簡単におこなえます。 http://serennz.sakura.ne.jp/sb/log/eid108.html ＩＥ限定でよければCSSのfilterで画像の回転が可能です。（これが一番簡単かも知れません） http://html-time.com/java/move_angle.htm 個々の要素を要素として扱いたいのなら、SVGを利用する方法もありそうです。 例えば、 http://raphaeljs.com/image-rotation.html こちらの例もライブラリを用いています。 ＞マウスオーバーで画像が変わるようなスライドショーを ご希望の動作がよく理解できていませんが、マウスオーバーで画像が変わるサンプルはいくらもあると思いますので、検索すれば沢山ヒットすることでしょう。 御質問内容として、いろいろな動作を組合せて使いたい様に推察されますが、そのような特殊なものになると、そのままピッタリのものはないでしょうから既存のものをカスタマイズするか、自作するかになりそうな気がします。 （例えば↑に挙げた回転の例も一つの要素の回転の例ですが、これを複数に対応させるのにも、探すよりも自作した方が早そうです）
補足
早速のご回答誠にありがとうございます！！ こちらの説明が分かりづらく、申し訳ございませんでした。。 上で補足させて頂きます！！！
補足
http://www.flandre.ne.jp/30th/ こちらのURLの、30週年限定！のアイコンを クリックした先のページに関してになります。 マウスの動きと連動して、並んだ写真を動かしたいのです…！