◆ 1ページに複数設置の場合のデモ サムネイル画像のaタグと拡大画像の写真をくくるdivににクラスを指定。 class="gallery01"
サムネイル画像をクリックして拡大画像を切り替え表示のデモページ | CodingMania
◆ 1ページに複数設置の場合のデモ サムネイル画像のaタグと拡大画像の写真をくくるdivににクラスを指定。 class="gallery01"
jQueryのresize()を実行後にページを再読み込みしたい - hateka’s blog
ウインドウのリサイズイベントでページの再読み込みをしたくて以下のコードを書いた。 $.fn.reload = function(){ $(window).resize(function(){ location.reload(); }) } 試しにウインドウサイズを変更したけどなぜか無反応。 でもこっちは動く。 $.fn.reload = function(){ $(window).resize(function(){ location.href = location.href; }) } ちなみにbindも同じ。 $.fn.reload = function(){ $(window).bind('resize',function(){ location.href = location.href; //location.reload();うごかない }) } これと同じだと思う。 それぞれの
クリエイターのためのWebテク講座 -スライドショーを作ろう。Vol.2
今回は、CSSアニメーションを使って、ちょっとしたスライドショーを作ります。 (第10回のつづき、アニメーション実装です。) サンプルを見る 今回のサンプルは、setIntervalを使って、画像をローテーションさせ、アニメーションをtransitionで定義しています。 ※今回も、CSS3の「transitionプロパティ」に対応した「Firefox」「Chrome」「Safari」でしか動作しません。残念ながら現時点ではIEは「transitionプロパティ」には対応していません。 座標の移動 前回、「popメソッド」と「unshiftメソッド」を利用して、配列の並びを変える処理を解説しましたが、実際にそれだけでは配置されている座標は変更されません。 「transitionプロパティ」の特性として、値が変更されたらアニメーションを実行するので、言ってしまえば座標さえ変更すればアニメーシ
2011-02-14 - 人工無脳が作りたかった
Twitter上で画像を共有する際に、国内外問わず広く使われているtwitpicですが、公開されているAPIドキュメント上にはフルサイズ（元画像のサイズ）での画像取得用のAPIが公開されていません。これがサーバーの負荷を抑える為か、それとも元画像に近いサイズで見たいならtwitpicのサイトに来て見てね!!!というメッセージなのかは私にはわかりませんが、仕事でどうしてもフルサイズの画像が必要になったのでちょっと調べてみたところ、以下のような方法でフルサイズの画像を取得する事が出来ました。 まず、これがTwitterに良くポストされているtwitpicにアップされた画像のURL。 http://twitpic.com/3xoeo9 これがサムネイル画像取得用のAPI http://twitpic.com/show/thumb/3xoeo9 これがミニサイズの画像取得用API http://t
CSS3 webkitTransitionEnd - スタジオ・アルカナ技術ブログ
前回の続きです transitionでアニメーションした後に 何か処理をしたい場合には webkitTransitionEndイベントを使います 書くほどでもないですが、ソースです。
厳選！驚くほどデザイン性の高い無料のブログテンプレート５５個 | バズ部
ブログのデザインは、読者に与える第一印象に大きな影響を与える。どれだけコンテンツが優れていても、デザインが悪ければ台無しになってしまう。一方、質の高いコンテンツと好印象を与えるのブログデザインが組み合わさると、読者の記憶に残るブログになる。 だからこそ、ブログのデザインに悩んでいる方は多いのではないだろうか？しかし、実は、ブログテンプレートを使うと、あっという間に質の高いブログデザインを作ることができる。 そこで、本日は、驚くほどデザイン性が高く、無料で使えるブログテンプレートを厳選して５５個ご紹介する。 あなたの気に入るものが、きっとあるはずなので、ぜひ使ってみよう。 Exhibition デモ ｜ ダウンロード Palladiumize デモ ｜ ダウンロード Architekt デモ ｜ ダウンロード ※有料版はレスポンシブデザイン対応 Grid Portfolio デモ ｜ ダウン
twitpicAPIを通じでtwitterの投稿画像を一覧表示させる方法 (#タグ検索) | Stronghold Archive
どうもこんばんは。今回のtipsは【twitpicAPIを通じでtwitterの投稿画像を一覧表示させる方法】です。twitpicAPIはv2が出てから触ってなかったのですが、結構便利なのでいつか使ってみたいと思っております。 twitpicAPI APIではXML,json,jsonpのどれかでデータの処理が行えます。ここではjsonpの例を書いておきます。ちなみに tag : "????" の部分でtwitterのタグで絞り込んでいます。 jQuery 本例では… ・ユーザー名 ・アバター画像URL ・投稿時間 ・投稿画像URL ・閲覧数 ・詳細ページURL ・地域 を取得、表示させています。 この他にも色々表示できますが詳細はRTM $(function(){ $.ajax({ url : "http://api.twitpic.com/2/tags/show.jsonp", dat
jQuery 一定間隔で画像を切り替えるアニメーションの作り方 – setInterval replace image animate | Stronghold Archive
jQuery 一定間隔で画像を切り替えるアニメーションの作り方 – setInterval replace image animate どうもこんばんは！ 今日もjQueryのネタです。 一定間隔で画像を切り替えるアニメーション ・HTMLの記述 <div id="animateField"> <img src="/images/abcd1.png"> </div> ・JSの記述 $(function(){ var count = setInterval(changeImg, 2000);//2秒間隔 i = 1; function changeImg(){ $("#animateField").children("img").attr("src","/images/abcd" + i + ".png"); if(i <= 5){//6枚の画像を順に切り替え i++; } else{ i
スクロールに応じて動くアニメーションをつくる方法 | Stronghold Archive
どうもこんばんは！ 今日のネタは…「スクロールに応じて動作するアニメーション」です。 そういったサイトも増え（むしろもう減った？） 目にする機会も増えたかと思います。 基本はこんなパラパラアニメを用意し スクロールによって画像の位置を変更する or 位置によって表示する画像を差し替える を実施するだけです。 パラパラアニメを用意するのが若干手間ですが それさえクリアできればけっこう簡単です。 …前置きはこれぐらいでデモとコード DEMO コード <script type="text/javascript"> $(document).ready(function(){ //#MovieContents内スクロール初期化 $(‘#MovieContents’).scrollTop(0,0); //#MovieContentsをスクロールでfunction実行 $(‘#MovieContents
マウスに合わせてメニューに要素が付いてくる
Result jQuery//マウスホバーイベント $('li a').hover(function() { var p = $(this).position().left; //マウスが乗るとclass="arrow"がアニメーションでポジションを変更 $('.arrow').animate({ //数値で位置を決める・・これだと汎用性が無いね:( left: (p + 60) + 'px'}); }, function() {});css.content { position: absolute; width: auto; height: 400px; } .arrow {/*矢印部分*/ position: absolute; margin-top: 0px; border-color: #696868 transparent; border-style: solid; border
jQuery 1.7の更新内容をまとめたよ。 | Ginpen.com
jQuery 1.7が公開されたので、早速1.6.xからの更新内容をまとめてみました。 jQuery: » jQuery 1.7 Released （リリース記事） Version 1.7 – jQuery API （公式ドキュメント、1.7で変更があったもののみ） 1.7 all tickets – jQuery Core – Bug Tracker （1.7の全チケット） リリース記事の翻訳じゃないです。 主な変更点 個人的に気になったものをピックアップしてみますよ。 既存の .bind()や .live()等に置き換わる .on(), .off()を追加 .bind(), .delegate(), .live()が統合されました。（これらも引き続き使用できます。） →詳細後述します。 toggleと.stop()の連携を改善 toggle系と組み合わせた際におかしくなってしまうのが改
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Preview機能付クリック型ギャラリー｜フォトギャラリー設置方法 Tips【myisland】
https://atmarkit.itmedia.co.jp/ait/subtop/features/da/dt_jqueryref_index.html
jQuery slider | ライブラリ | KANTENNA.COM