ロールオーバーで他の画像を切り替えるJavascript ｜ ZIYOTOY.NET【じよとい】
同じような機能を２つの案件で求められたので作りました。 大きな画像があって、サムネールにロールオーバーすると大きな画像のほうもロールオーバーする、というものです。 ロールオーバーで他の画像を切り替えるサンプル for文からのイベント予約 for文を回して複数の要素からスコープの異なる他の要素に何かしたいという時、for文内部からaddEventListenerしたりしたい時がありますが、 function hogehoge() { var foo = bar.getElementsByTagName("a"); var baz = ["0", "1", "2", "3", "4"]; for(var i=0; i<foo.length; i++) { var hoge =baz[i]; var callback = function(){ return hoge; }; foo.addEv
第6回「ロールオーバーでフェードイン／アウト」
【jQueryのプラグインを作ろう！】 第6回「ロールオーバーでフェードイン／アウト」 ＊これはascii.jpで連載した記事の続きです。このため、このページを読む前にあらかじめascii.jpで連載した記事をお読み下さい。 text : 古籏一浩 ■ロールオーバーの処理 Webページ上では当たり前に見られるロールオーバーの処理を実現するjQueryプラグインを作成してみます。ここで作成するプラグインは画像の不透明度を変化させるタイプのロールオーバーです。つまり、2〜3枚の画像を入れ替えるタイプではありません。 ■fadeTo()でフェード処理 まず、プラグインの名前はimageBorderとしましょう。 不透明度を変化させるにはfadeTo()を使います。マウスが重なったら不透明に、離れたら少し透明にします。fadeTo()の最初のパラメータがフェードするまでの時間になります。これはミリ
APPLE のサイトのナビゲーションバーの仕組み（CSS でロールオーバー） - minorio のプログラミング・メモ
CSS だけで（JavaScript を使わずに）ロールオーバーさせる方法を学んだ。やり方はいくつかあるけど、もっともスマートな方法はやっぱりアップルが採用している方法かな。CSS を無効にしたときの画面も美しい。結局そういうコーディングが SEO 的にも最適だし。 文字は padding-top と overflow: hidden で見えないようにしているようだ。その上で hover したときに背景画像のポジションをスライドさせている。 #globalheader #globalnav li a { float: left; width: 117px; height: 0pt; padding-top: 38px; overflow-x: hidden; overflow-y: hidden; } #globalheader #globalnav li a, #globalheader
jQuery勉強メモ：画像や文字の透明度を利用したロールオーバーをプラグイン化してみた
昨日のプラグインの記述方法を利用して、 自分がよく使う機能をプラグイン化してみた。 今回のは、以前にも紹介した、透明度を利用したロールオーバー。 時々利用するのでプラグインの記述方法で書き直してみた。 透明度を利用するロールオーバー 作ったプラグインのデフォルトの状態は、 以前に紹介したロールオーバーの逆、 ロールオーバー時に透明になっていき、 マウスが離れたときは、もとに戻る仕様にしています。 ■JavaScript (function($) { $(function() { $.hamFunction.opacityRollOver({ /*適応させる部分の変更*/ fnClass:'.over', /*デフォルトの透明度指定*/ opacityDef:1.0, /*フェードの時間指定*/ fadeTime:200, /*マウスオーバー時の透明度の指定*/ opacityOn:0.6,
[JS]ホバー時、ふんわりとバウンドするモーションをつけるスクリプト
マウスのホバー時に、ふんわりとバウンドするモーションをつけるスクリプトをJanko at Warp Speedから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $(".button").hover(function(){ $(".button img") .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump .animate({top:"-6px"}, 100).ani
jQueryでマウスオーバーを印象的にする：jQuery Animated Menu
twitter facebook hatena google pocket マウスオーバー時に効果を与えることは当たり前になっていますが、もうちょっと工夫をするとユーザーの興味を喚起できるかもしれません。 jQueryの.hoverという基本的な手法を利用して、マウスオーバーを印象的にする小ネタです。 via：jQuery Animated Menu sponsors 使用方法 今回はサンプルとしてメニュー的なhtmlを記述してみます。 <ul id="menu"> <li class="home"><a href="#">home</a></li> </ul> CSSは以下とします。 ul#menu {height:81px;margin:0;padding:0;} ul#menu li a {display:block;height:81px;width:159px;text-inde
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
trick7 RTP Live: Info Bocoran RTP Slot Online Pragmatic Play Gacor Terlengkap -