- ベストアンサー
jQueryでクリックした場所に赤枠を付けたいです
- jQueryを使用して、クリックした場所に赤枠を付けたいです。
- 下記のページにスライダーを設置していますが、サムネイル画像をクリックした時とオンマウスした時に、赤枠を追加したいです。
- 選択中のサムネイルから赤枠が消え、新しく選択したサムネイルに赤枠が付くような動きを実現する方法を教えてください。
- gumkucha_max
- お礼率66% (2/3)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- jQueryに関してアドバイス頂けますでしょうか
はじめまして、gumkucha_maxと申します。 jQueryに関して、どなたかご教授頂けますでしょうか。 ページ内に複数のスライダーを設けたいのですが、 現状、下記ページのような動きになってしまいます。 ▼現状のページ http://ihatovo-cafe.com/tmp/search-2014/index-test20140312.html やりたい事としては、各スライダーのサムネイル画像をクリックすると、 メインの画像が切り替わるという動きにしたいのですが、 現状はサムネイル画像をクリックすると、ページ内にある全てのスライダーのメインが切り替わってしまいます。 どなたかご教授お願い致します。
- ベストアンサー
- JavaScript
- jQueryを使ったロールオーバーについて
初めまして。Webサイト作成の初心者です。 JQueryを使って、フェードエフェクト効果のあるロールオーバーを作成したいと思っております。 例えば次のサイトでは、若干フェードエフェクト効果のあるロールオーバーとなっておりますが、ソースを見るとbody内にはオフマウス用の画像だけが記されております。 http://mizuame.sakura.ne.jp/jquery.tgImageRollover/demo/script2.html オンマウス用の画像への切り替えはCSSで行っているのでしょうか？ ちなみに、グローバルメニューなどでは、オフマウス用とオンマウス用の画像を一つにし、CSSで座標を調整することで、ロールオーバーをすることが多いと思いますが、この方法だとJQueryを使ってロールオーバーにフェードエフェクト効果を付けることはできないのでしょうか？ それとも、やはりロールオーバーにフェードエフェクト効果を付けるには、オフマウス用の画像とオンマウス用の画像を、それぞれ用意し、オフマウス用の画像はHTMLに記述し、オンマウス用の画像はCSSに記述するのでしょうか？ どのような回答でもお受けしたい所存で御座いますので、どうか宜しくお願い致します！！
- ベストアンサー
- JavaScript
- 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.】 もし、このような質問をする際に最適な掲示板などがあればご教授頂けましたら幸いです。
- 締切済み
- JavaScript
- jQuery slider2のページアイコン
小生、ウェブサイト制作経験はアリながらもJavascriptに関しては全くの素人です。 既成のJavascriptプログラムの中でスライドショー向けのｊQuery slider2をダウンロードし、 ウェブサイトに適応してみました。 概ね思った通りに作動するものの、スライダー部分の右下に表示されページアイコン（class="jquery-slider-page"として作成されている部分？）が、現在表示している部分に相当するアイコンをクリックすると、現在表示している画像を進行方向に流してしまい、背景が表示されるようになっています。 なおかつ、背景が表示された状態でもう一度同じアイコンをクリックすると、消えているはずの現在ページが一瞬表示されるものの、すぐに進行方向へ流してしまうというおかしな動作をします。 もともと期待されていた動作ではないと思うのですが、ダウンロードしてきたものをそのまま使ってこのような動作になってしまっていました。 不得手ながら中身を読み取ってみたところ、現在表示しているページのページアイコンをclass="jquery-slider-page"からclass="jquery-slider-page-current"に書き換えることで、アイコンの表示を変更しているようなので、一時的にclass="jquery-slider-page-current"のクリックを不可にすれば解決するのかなとは思うのですが、何かよい方法はないでしょうか。 使用しているjsは下記のとおりです。 https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js jquery.slider.min.js（http://wex.im/javascript/jquery-slider2にて公開されているファイルをダウンロードして使用） また、専用のCSSも特に書き換えなどせずに読み込ませて使用しています。 他にもjs併用はしていますが、紹介サイトでも同様の動作をしていたので、他のjsによる干渉などではない様です。 よろしくお願いします。
- 締切済み
- JavaScript
- jqueryでスライダーを設置した時に
jqueryでスライダーを設置した時に設置したページのテキストが画像がスライドするタイミングで点滅してしまうようです。 現象が起こっているのはMacのsafariとchromeです WindowsのIEやモダンブラウザ、MacのFirefoxではオッケーのようです。 ちなみにコンテンツスライダーは、glide.jsやbxslider.jsです。両方とも同じ現象が起きます。 chrome はwebkitではなくなりましたし、、、 該当ページでは、スティッキーヘッダ、トップへ戻るボタン、ロールオーバーや複数のタブパネルなど、jQueryの塊のようなページになっておりまして、、、 ただ、それらをすべて無効にして、スライダだけを実装状態にしても同じようです。 スライダーそれぞれのCSSをみてみましたが、同ページにあるCSSの他のセレクトと同名のセレクタはないようです、、、 どなたか似たような現象を解決された方がいらっしゃいましたらご教示願えますでしょうか？
- 締切済み
- JavaScript
- jQUery：フェードアニメーションについて
jQueryのスライドショーをサイトに配置しようと考え、下記URLのソースを 参考にしようとしています。皆様のお知恵をお貸しいただければ 幸いです。 http://jsdo.it/TFujinami/8EaB こちらのソースで、フェードアニメーションで メインイメージを変化させたいのですが、 どこを修正すればよいのでしょうか。 $(function(){ var slider_interval = 4000; var slider_now = 0; var slider_max = 0; var slider_mouseover = false; var slider_img_width = $("#slider").width(); var slider_href = new Array(); function sliderScroll(){ slider_now++; if (slider_now > slider_max){ slider_now = 0; } sliderAnimation(slider_now, 'slow'); } function sliderAnimation(index, speed){ $('#slider .gallery .inner').animate({'margin-left':index * -1 * slider_img_width + 'px'}, speed, function(){ $('#slider .thumbnail div').removeClass('now'); $('#slider .thumbnail div:eq(' + index + ')').addClass('now'); $('#slider .frame a').attr('href', slider_href[index]); }); } var sliderLoop = function(){ if (! slider_mouseover){ sliderScroll(); } slider_scroll_timer = setTimeout(sliderLoop, slider_interval); } $('#slider .thumbnail div').mouseover(function(ev){ slider_mouseover = true; slider_now = $(this).attr('data-sliderid') - 0; sliderAnimation(slider_now, 'fast'); }); $('#slider .thumbnail div').mouseout(function(ev){ slider_mouseover = false; }); $('#slider .gallery .inner div').each(function(){ $(this).css('margin-left', slider_max * slider_img_width + 'px'); $(this).css({'position':'absolute', 'margin-top':'0px'}); slider_href.push( $(this).find('a').attr('href') ); slider_max++; }); slider_max = 0; $('#slider .thumbnail div').each(function(){ $(this).attr('data-sliderid', slider_max); $(this).find('img').wrap( $('<a>').attr({'href':slider_href[slider_max], 'target':'flickr'}) ); slider_max++; }); slider_max--; $('#slider .frame img').wrap( $('<a>').attr('target', 'flickr') ); sliderAnimation(0, 'fast'); setTimeout(sliderLoop, slider_interval) }); 本来ならば作者様に質問する事がよいと思うのですが、 より多くの方からお知恵を拝借したいと考え、この場で質問 させていただきました。 何卒よろしくお願いいたします。
- ベストアンサー
- JavaScript
- (JQuery）スライダーのサンプル探しています
jquery初心者です・・。 クライアントからの要望がありましたので（http://shop.benesse.ne.jp/ ）のようなjqueryのサンプルをずっと探しているのですがありそうでなかなかありません・・ 画像が入れ替わる時の動きに決まりはありません。 右に各コンテンツのサムネイルが縦に並んでいて左のメインイメージが連動して入れ替わり 画像をクリックするとコンテンツへリンクする。 といった動きです。 どなたかご存知の方教えていただけますでしょうか・・！ 何卒よろしくお願いいたします・・・！
- ベストアンサー
- CSS
- jQueryスライドプラグイン
jQueryスライドプラグイン FLASHを使用せずにjQueryのプラグインで以下のような表現は可能でしょうか？ http://www.starcat.co.jp/ 以下が実現したいです。 ・メイン画像がフェードまたは、スライドで切り替わる ・メイン画像クリックで別のページへリンク ・サムネイルクリックでメイン画像が切り替わる ・ランダムで表示できる ・自動で遷移する。
- 締切済み
- JavaScript
- Jqueryの超初心者です
いつもはコピペで作業しています。 こちらのサイトを参考にサムネイル画像をクリックするとメイン画像が切り替わるページを作成しています。 http://memocarilog.info/jquery/7477 表示されたメイン画像に外部リンクを設定するにはどう記述したら良いでしょうか？ お願いします。
- 締切済み
- JavaScript
- jQuery等で背景をフル表示＋スライドショー
http://www.daichifive.com/ ↑のサイトのような感じに背景を画面サイズに合わせてフル表示にし、 サムネイル出して、クリックすれば、次の画像に切り替えたいと思っています。 画像は３枚で、３枚目の画像だけ、縦長になっているので、 背景が３枚目になったときだけ縦スクロールバーを付けて、 上から下まで見れるようにしたいです。 サムネイルを出して、次の画像に切り替えるくらいですと、 jQueryを探せば何かあると思うのですが、 ３枚目だけ縦スクロールバーをつけることなどできるのでしょうか。 できるとすれば、どのjQueryを使って、どうゆうカスタマイズをすればできるのでしょうか？ jQuery以外の方法でも、上記のような動きを実装できるやり方があれば ご教授いただけないでしょうか。 よろしくおねがい致します。
- ベストアンサー
- CSS
お礼
LancerVII様 なるほど！素晴らしい発想ですね・・ まったく思いつきませんでした・・ おかげ様で希望通りのデザインが出来そうです。 非常に助かりました。 本当に有難うございました！