マウスホバーで見出しが変わるjquery

前へ 次へ
このQ&Aのポイント
  • マウスホバーで見出しが変わるjqueryプラグインや方法を探しています。参考URL先にあるスライダーが理想的ですが、似たような表現ができるものを探しています。
  • 参考URL先にあるマウスオーバーで見出しが変わるjqueryプラグインや方法を探しています。現在見付けたものは使いにくいため、似たような表現ができるものを探しています。
  • マウスホバーで見出しが変わるjqueryプラグインや方法を探しています。参考URL先にあるスライダーが理想的ですが、使えるものが見つかりません。似たような表現ができるものを探しています。
回答を見る
  • ベストアンサー

マウスホバーで見出しが変わるjquery

下記の参考URL先にあるようなマウスオーバーで見出しが変わるjquery？スライダーを探しています。 参考URL http://www.jfa.jp/samuraiblue/ 自分で探してみて一応それっぽいものは見付けることができたのですが、いずれも難があって使うことができません。 Image Rotator with DescriptionsやFeatured Content Slider Usingの場合、右側のリストをマウスホバーしても左側の画像や見出しを切り替えることができず、さらに右側リストをクリックしてマウスオーバーしていても左側の見出しがガンガン進んでしまうので使えませんでした。 参考URLhttp://designm.ag/previews/jquery-image-rotator/ 参考URLhttp://demo.webdeveloperplus.com/featured-content-slider/ http://www.jfa.jp/samuraiblue/にあるスライダーが一番理想的なのですが、似たような表現のできるjqueryプラグイン、又はその他の方法はないでしょうか？どうか宜しくお願いします。 ※jQuery初心者の為、伝わりにくいかと思いますがご容赦ください。

画像を拡大する

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

理想のものを探してもそっくりそのままのものを誰かが用意してくれているとは限りません。 とは言え、こんなのは？ http://blog.net-king.com/downloads/imagenavigation/ デモだけ見て違うとか判断するのでなく、ご提示の二番目の参考ＵＲＬのものには、止めたい人のためのpauseする方法の説明があるようですよ。（下の方） http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/ 最初の参考ＵＲＬのものが理想なら、それを参考に作成するという方法もあるかと。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQueryでホバーされていない要素を半透明にする

    http://www.skuare.net/test/jopacity_show.html 下記のようにスクリプトがありますが、いまいちわかりません。 画像の場合　<li><img src=hoge.gif title="menu 1"></li>でよろしいのでしょうか？ <ul id="menu"> <li>menu 1</li> <li>menu 2</li> <li>menu 3</li> <li>menu 4</li> </ul> 「menu 1」にマウスオーバーされた際に、ほかの2-4が半透明になるイメージです。 まずはjQueryからjquery.jsをダウンロードします。 その後、以下のようなscriptを記述します。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#menu').children().hover(function() { //#menuの子要素にマウスオーバーした時の処理 $(this).siblings() //その要素の兄弟要素をすべて取ってきて .stop().fadeTo(500,0.5); //500ミリ秒かけて、opacity0.5まで変化させます }, function() { //マウスアウトの処理 $(this).siblings() .stop().fadeTo(500,1); //戻します }); }); </script>

  • jQuery を使って下記のようなことは可能でしょうか。また可能な場合

    jQuery を使って下記のようなことは可能でしょうか。また可能な場合参考になるテンプレートのようなものがある場所を教えていただけますと幸いです。 http://www.nittsu.co.jp/index.html のサイトのグローバルメニュー下のFlashコンテンツ。 やりたいことは、 同じように右側に4つのボタンを縦に配置して、マウスオーバーをすると左側のイメージが変更されるようにしたい。 また、右側のボタンをクリックするとリンクされているページに飛ぶ形。 表示されるイメージは、フェードインなどのように動的に表示される必要はなく、単純に静的なイメージが切り替わる感じです。 よろしくお願いいたします。

  • jQuery スライダー

    下記のサイトを参考にjQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置しました。 参考サイトにあるようにちゃんと動かす事は出来たのですが。 しかし、現在作成中のwebページは、このコンテンツスライダー要素全体を囲うブロック要素が1000px,スライダーを表示する幅を950pxにしたいのですが自分なりに試行錯誤しても、メイン表示エリアがスライダーを表示する、幅950px内の中央に来ません。 参考サイトには、今回のjqueryのソースではコンテンツスライダー要素全体を囲うブロック要素が100%でないといけないとなっています、この場合はHTML,CSS,SCRIPTどこを変えれば、コンテンツスライダー要素全体を囲うブロック要素が1000px,スライダーを表示する幅を950pxに納める事ができるのでしょうか？ 自分のソースを書くスペースが無いので、申し訳ありませんが、私が参考にしたサイトのURLよりソースをご確認頂き、ご指摘お願いいたします。 参考サイト http://black-flag.net/jquery/20121219-4407.html

  • クリックで卵がパカっと割れるようなjquery

    表題の通りなのですが、クリックイベントで、卵が両サイドにパカっと割れるような動作を再現したいです。 断面はギザギザが好ましいののですが、サンプルなどあれば是非URLを教えて下さい。 マウスオーバーイベントですが http://www.oto-con.com/wp-content/demo/jquery-move-the-images-left-and-right/ こんな感じが動きとしては近いです。 もうすこし、パキっと動かしたいのですが・・・ 宜しくお願いします。

  • jQueryの基本的なことについて教えてください

    自サイトで 「jQuery Slider²」http://wex.im/javascript/jquery-slider2 を設置しようと試みています。 私はhtmlとcssの知識しかありません。 今までずっと、HTML 4.01 Transitionalで、タグ打ちしながらサイトの作成をしていました。 行き詰ったらその都度ネットで調べて…という感じで 10年以上サイト製作をしていますが素人ほどの知識だと思っています。 それで、初めて上のスライドショーを設置しようと色んなサイトを参考にしたのですがうまく動きません。 （google chrome、IE8で見ています） 何が悪いのか…と上記URLの配布サイトを見たところ、 Examples <head> stuff <script type="text/javascript" src="js/jquery.slider.min.js"></script> <link href="css/jquery.slider.css" rel="stylesheet" type="text/css" /> と、2段目がtype="text/css" />という風に閉じてあって、 あぁ、これってページ全体をもうhtmlじゃなくて xhtmlで書かないと動かないって事なのかなぁ、という疑問が沸いてきました。 実際このスライドショーに限らず、jqueryのプラグインを使用している 色んなサイトがxhtml方式になっているのを確認しましたが jQueryのプラグインは、xhtmlでないと動かないものでしょうか？ それとも、このプラグインに限ってはxhtmlなのでしょうか？ よろしくお願いいたします。

  • マウスアウト後も画像が消えたままにしたいのですが

    cssまたはjqueryの件で質問です。

 背景画像をマウスオーバーで「noneimage（背景画像なし）」に設定しているとして、
 その後マウスアウトしても画像が消えたまま（マウスオーバー状態の効果を持続）にするにはどのようにすればいいでしょうか？

 とりあえずcssで「:hover」でbackground-image:noneにしていますが、 
これだとカーソルがそれた時点で背景画像が出てきてしまいます。 

経験が浅いのでcssかjqueryかどちらを使えばいいかわかりませんが
 どなたか例を教えて頂けますと幸いです。

 どのようにしたいか図で示したものを添付しますので
参考にしてください。 

よろしくお願い致します。

    • ベストアンサー
    • CSS
  • jQuery UIを使用した画像スライダーについて

    お世話になります。 当方、htmlとcssの知識しかなく、Javascriptはほとんど未知の領域なのですが、 ホームページに動きを付けたくて、jQuery UIを使用した画像スライダーの設置方法を載せたサイトを探していました。 そこで、下記のサイトさんのスライダーがイメージに近かったので使用したいと考えています。 ttp://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_imagegallery#a_image_rotator サンプルページ ttp://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/featured_content_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB そっくりそのまま実装することができ、スタイルシートの記述をいくつかいじって 枠の幅や画像の大きさを変更するまではできたのですが、 項目を追加することができませんでした。。 ※サンプルページで、4つある項目の一番下ハニートースト＠…の下にさらに項目を追加して、5つか6つくらい画像がスライドするようにしたいのです。 htmlファイルで、<li>や<div>を追加して、id="nav-fragment-4"をid="nav-fragment-5"にして 連番にもしましたが、それだけではうまく画像が表示されません。 ※4番目のタグをコピーして5番目を作りましたが、5番目をクリックしても画像が表示されず真っ白で、そのあと4番目をクリックすると、画像が2つ縦に連なって表示されます。 javascriptの記述で最大何枚画像が表示されるという記述があるのでしょうか？ 素人の質問なので、わかりにくい部分はあると思いますが、 何卒、お力添えよろしくお願いします！！

  • jQueryUI自動スライド右側リストを増やしたい

    http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/featured_content_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB 上記の自動スライドなのですが、例では４項目なのですが、10項目くらいに 増やして利用したいと思っています。 単純に10個に増やすと、左の画像部分はきちんと10個目まで表示されますが、 右側は６個目から隠れたままで表示されません。 #featured ul.ui-tabs-navのheightを300pxにして、overflow:hiddenに しています。 ６個目からもカーソルと連動して右のリストを表示して動かすにはどのように したらいいのでしょうか… また、右の動くカーソルを左の画像に重なるようにはできないでしょうか？ 背景のしろが目立ちすぎる気がして… 宜しくお願いいたします！！

    • ベストアンサー
    • CSS
  • jQueryの読み込みについて

    初めまして、制作をしておりまして、 http://card.benrista.com/ 上記のサイトの上にある、sliderのjqueryがありますが、素敵だなと思いまして、 それを私のサイトでも導入したいと思いまして、導入してみました。 (アフィリエイトサイトでは無いですが。。) 【やりたい事・質問】 しかし、スライダーのjqueryは上手く機能するのですが、 上記のサイトを開いた瞬間にスライダーの下の小さいサムネイル部分の gifアニメーションが上手く動きません； http://card.benrista.com/wp-content/themes/benrista/img/index/preloader.gif 上記のURLのサイトのような形でサイトを開いた瞬間に、gifアニメーションを機能させ、 そのあと、小さいサムネイル画像を表示させたいです。 【状況】 状況としては、私のサイトの場合、開くと gifアニメーションが小さいサムネイル画像の下に隠れている状態になってしまいます。 (一応gifアニメーションがサムネイル画像の隙間から少し見える感じです) firebugなどで要素確認などしても、中々難しいです。 【p.s.】 もし、このような質問をする際に最適な掲示板などがあればご教授頂けましたら幸いです。

  • jQuery：マウスオーバーで画像が切り替わる

    下記のサイトのような事が実装できるjQueryプラグインを探しています。 http://www.sumitomo-rd-mansion.jp/shuto/shinjuku/private.html 実装したい事 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ １）メイン画像の切り替えは 矢印をクリックするか サムネイルをマウスオーバーすると切り替わるようにしたい。 （スライドショーはなし） ２）メイン画像にはテキスト（説明文）も入れられる ３）メイン画像の下には、サムネイル画像も表示できる ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 参考になるサイト等、ご存知でしたら教えていただけば幸いです。

    • 締切済み
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する