![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
http://www.chikinramen.jp/chikirars/character01. …
上記のサイトの様に、マウスオーバーでキャラクターがぴょこんと飛び出してくるメニューを作りたいのですが、そういったJavaScriptが掲載されているサイトはありますでしょうか。
それに近い
FreshBottomSlideOutMenuというのは見つけたのですが、メニュー自体が上に飛び出すのではなくて、メニューからイラストが飛び出すのを探しています。
知っている方いらっしゃれば教えて下さい。
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
一番簡単なのは、オンマウスでアニメgifに入れ替える
<img src="1.gif" onmouseover="x=this.src;this.src='1anime.gif'" onmouseout="this.src=x">
なるほど!!
アニメギフに入れ替えるなんて思いつきもしませんでした。
発想の転換ですね!
回答していただきありがとうございました。
No.2
- 回答日時:
飛び出す画像がそれぞれ違うとなると使えないですが…
それっぽい事が出来ると思います。
easing プラグインを使用すると、飛び出た感を出しやすいと思います。
#menuBg の背景を画像にすれば良い感じかと。
アニメーションの時間の微調節や、位置など、非常に適当にやってます。
こんな感じでどうでしょう。
--header ------
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7. …
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#mainMenu ul li').hover(function(){
var posiY = $(this).index('li');
var posi = ((posiY+1)*100)-70; //ここで、左右位置を微調節
$('#menuBg').text(posi)
$('#menuBg').css({
left:posi,
});
$('#menuBg').animate({
top:'50px' //ここで、縦位置調整 飛び出したときの位置
},'fast','easeOutBounce')
},function(){
$('#menuBg').animate({
top:'100px' //ここで、縦位置調整 引っ込んだときの位置(メニューバーで隠れるように)
},'fast','easeOutBounce')
});
});
</script>
<style>
*{margin:0px; padding:0px;}
img{border:none;}
ul,li{list-style:none;}
#menuBg{
position:absolute;
background:#09F;
width:30px;
height:30px;
top:100px;
}
#mainMenu{
}
#mainMenu ul:after{
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}
#mainMenu ul li a{
display:block;
padding:30px auto;
background:#aaa;
height:30px;
}
#mainMenu ul li{
position:relative;
float:left;
width:100px;
top:100px;
z-index:100; /* 横メニューで、飛び出す前の画像を隠すために z-indexを調整 */
}
</style>
--header ------
--body---------
<div id="mainMenu">
<ul>
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
</ul>
<div id="menuBg"></div>
</div>
--body---------
お礼が遅くなってしまい大変申し訳ございませんでした。
しかも、Java Scriptを記載いただけるなんて、本当に感謝しております。
色々、微調整等行ない、試してみたいと思います。
回答していただいてありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- gooブログ ブログの記事を書きだしのみに表示したい 1 2022/06/25 19:11
- ブルーレイ・プレーヤー・レコーダー 動画のDVD出力と再生について 6 2022/12/07 09:47
- デスクトップパソコン PCでファイルを右ドラッグして出てくるメニューの編集方法を教えて下さい 2 2023/01/17 13:31
- レシピ・食事 チキンカレー(インド)の作り方 1 2023/06/05 19:37
- ダイエット・食事制限 ローファットダイエットについてアドバイスをください。 現在、体脂肪率が28で肥満1型になった旦那のダ 1 2022/09/03 09:06
- 物理学 ニュートンのゆりかごの現象について教えてください。 9 2023/03/14 16:23
- Chrome(クローム) 最近また再びPinterestでChromeやSamsungブラウザ(Galaxyの標準ブラウザアプ 1 2022/04/29 19:58
- その他(悩み相談・人生相談) 大学生女子です。 私は、新しい環境、コミュニティに飛び込むことが出来ません・・・今、あるスポーツに興 1 2022/08/04 21:29
- その他(スポーツ) 大学の部活について 3 2022/05/21 16:40
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
[jQuery]bxSlider 一番最後と...
-
前回の質問の続き
-
MAX関数を使ってからLEFT JOIN...
-
jspでcssが読み込めない
-
1枚の画像をクリックすると複数...
-
フッター上部に謎の隙間
-
iframe内のリンクが飛ばないの...
-
MFCで画像を表示させているので...
-
表示・非表示のスクリプトで、...
-
getElementByIdの戻り値がnull...
-
appendChildでのデフォルト値
-
【javascript】ロールオーバー...
-
iframe内のリンク文字のマウス...
-
jQueryでのドラッグアンドドロ...
-
bxsliderで最初に縦に複数表示...
-
指定したフォルダの画像を一括...
-
JavaScript で flexslider の画...
-
「画像クリックで音声再生」を ...
-
画像の重なりの順序を代える方...
-
複数bxsliderをタブで切り替え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
同一ページ内の複数のタグに同...
-
【jQuery】2分割レイアウトで、...
-
キャラクターがぴょこんと飛び...
-
画像をフェードアウト&フェー...
-
jqueryのプラグインslickの画像...
-
html5に変えるとスライドショー...
-
Javaスクリプトで画像を縦にス...
-
high slideをFC2ブログで
-
ご教授ください。
-
jQueryでタブ、スライダーを使...
-
チェックボックスと画像切替の連動
-
jQueryのclickイベントハンドラ
-
javascriptで文字サイズの変更
-
fontsize.jsでhtmlの大中小の設...
-
【iOS及びAndroid】リンク画像...
-
Firefoxとクロームでフェードイ...
-
javascript src書き換え
-
神経衰弱 順番に裏返し
-
アコーディオンメニューが開い...
おすすめ情報