jQueryを使いマウスオーバーで画像を変える基本 | ニトなび
マウスオーバーのアクションで画像を変化させるという方法はたくさんのサイトで用いられていますが、 今まではCSSで割り当てたりHTMLで直接書いてみたりというのが一般的だったと思います。 ここ近年、jQueryというJavaScriptとHTMLの相互作用を強化する軽量なライブラリが登場したことに よりjQueryが普及してきましたが、jQueryは難しいとか思われがちです。しかし、基本さえ覚えてしまえばCSSを書くよりも簡単な感覚で覚えられますので、一番初歩的な画像のマウスオーバーアクションをjQueryを使って動かす方法を記事にしてみたいと思います。 jQueryでマウスオーバー？画像を変える？ つまり、こういう事です。 demo おそらく誰でも目にしたことがあるかと思います。何故、わざわざjQueryで動かすのが良いのか？って思うでしょうが、ズバリ管理が超楽なことと、jQueryという
jQueryで奥行きのある背景スクロールを作ってみる
jQueryで奥行きのある背景スクロールを作ってみる 普通に背景画像を指定するだけだとスクロールに追従して画像も移動しますが、jQueryで背景位置を調節することでスクロールの速度をずらすことができます。 この記事ではこの機能を利用して、スクロールすると奥行きの感じられる動作を作ってみます。 投稿日2011年05月13日 更新日2011年05月13日 画像を手前は早く、奥は遅く移動 デモを見て頂ければわかると思いますが、やってることは手前の背景画像を早く動かし、奥の画像を遅く動かしているだけです。 html + css 画像は当然ですが2枚以上用意しましょう。 ここでは3枚画像の画像を使用します。 なのでdivを3つ用意し、それぞれに背景画像を指定します。 html <div id="bg03"> <div id="bg02"> <div id="bg01"> <!-- /#bg01 --
ColorBoxでiframeを開く - jQuery
jqueryベースで動作する「ColorBox」。 主に画像を拡大表示するときなどに使いますが、iframeを開きたいときにも使うことができます。 使い方は簡単。 1.ソース中のポップアップさせたい部分に class="iframe" を記述し、js,cssファイルを読み込みます。 （例） <a href="/job_search.php" class="iframe"><img width="29" height="168" alt="test" src="/images/common/direct_btn.png"></a> ColorBoxからダウンロードしたjsファイルとcssの読み込み。 <script type="text/javascript">google.load("jquery", "1.7.1");</script> <script type="text/javasc
画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
JavaScriptを使ってクリック時に画像を入れ替える | チバのブログ
簡単なスクリプトではあるんですが、簡単であるがゆえに仕事で使うときなんかはその都度スクリプトを書いていたりします。それをどこかにまとめておけば時間の短縮にもなるのでここでまとめておこうかと思います。 サンプルページ 使うライブラリはjQueryです。 jQueryをHTMLに読み込む手順については、Google AJAX Libraries APIとServing YUI Filesという記事に詳しく書きましたので、そちらをご覧ください。 前提 HTML Javascript ちょっとした効果をつけてみる HTML 大きな画像とサムネイルリストを用意しなければなりません。今回はサムネイルを作らないで大きな画像を縮小表示させてサムネイルみたいにするという横着をする場合なので、ソースもこんな感じになります。 メインの画像部分 <p><img id="target" src="path/to/
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryサンプル集 | DesignWalker
http://blog.net-king.com/2010/10/06/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AB%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%99%E3%82%8B%E3%81%A8%E3%83%A1%E3%82%A4%E3%83%B3%E7%94%BB%E5%83%8F%E3%81%8C%E5%88%87/