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ランキング
-
bxSliderのランダム表示について
-
Slick.jsのオプションrtlについて
-
画像をフェードアウト&フェー...
-
スライドショー「Skitter」をカ...
-
Dreamweaver上とデバイスプレビ...
-
MAX関数を使ってからLEFT JOIN...
-
【CSS】floatで左右に並べた...
-
[急ぎ] videoタグで埋め込んだm...
-
jspでcssが読み込めない
-
JavaScriptで変更した属性の元...
-
console.log結果をhtmlで表示し...
-
javascriptテキストBOX色を元に...
-
デフォルト非表示にしたい。【t...
-
Jqueryでリストのスクロール
-
CSS 可変マージン
-
複数のリンク画像を一定時間で...
-
クリックで色変更後に既に変更...
-
JSPでの画像ファイル表示
-
CSS <div>の入れ子が反映さ...
-
eclipseでcssを使うためには?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
アコーディオンメニューが開い...
-
横並びの画像を3枚時間差でフェ...
-
html5に変えるとスライドショー...
-
キャラクターがぴょこんと飛び...
-
Javaスクリプトで画像を縦にス...
-
CSSでマウスオーバーした画像を...
-
スライドショー「Skitter」をカ...
-
jsでグリッドデザインのサムネ...
-
複数の要素へ appendchild でき...
-
【iOS及びAndroid】リンク画像...
-
jqueryのプラグインslickの画像...
-
bxSliderのランダム表示について
-
同一ページ内の複数のタグに同...
-
スライド機能について
-
Dreamweaver上とデバイスプレビ...
-
チェックボックスと画像切替の連動
-
Javascriptを使用したスライド...
-
画像をフェードアウト&フェー...
おすすめ情報