読んで覚える、触って体験！JavaScript＆CSS3～gihyo.jp×jsdo.it presents 記事一覧
読んで覚える、触って体験！JavaScript＆CSS3～gihyo.jp×jsdo.it presents 記事一覧 | gihyo.jp
読んで覚える、触って体験！JavaScript＆CSS3～gihyo.jp×jsdo.it presents 記事一覧
設置サンプル
参照：Smooth Div Scroll ▼マウス操作で水平方向にスクロールする画像スライド デフォルト マウス操作でスクロールします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-e
Xlune::Blog
非同期ページ(部分)遷移jQueryプラグイン(jquery.smartPage.js) 元々jQueryは基本的な非同期ページ遷移機能は付いてんだけど、もうちょっと機能を追加しつつ、汎用性を持たせたものが欲しいなーと思ってとりあえず書いてはみました。 ステータスとしては、「書いたよ」じゃなくて「書き始めた」けど限が無さそうなので、自分のサイトで使える程度でいいや、、、です。 html5のpushState(pjax)と"#!"を利用したロケーションハッシュによる非同期ページ遷移の両方を実装したモノを目指してます。非対応(IEとか)の場合は普通に同期遷移します。 非同期ソースに、"script"タグがあったり、"document.write"の記述があっても、なるべく表示を再現するよう試みますよー。 jquery.smartPageのオプション/コード Download github zi
2段階に連動するプルダウンメニューの作り方 [ホームページ作成] All About
プルダウンメニューを使って閲覧者に何かを選択してもらいたいとき、選択肢の数が多いならプルダウンメニューを2段階に分割して連動させる方法を検討してみてはいかがでしょうか。 1つのプルダウンメニューに含まれる項目数が多すぎると、選択肢の全体が把握しにくくなる上に、望みの項目を探すのも大変になります。2段階にすれば、選択肢を絞り込んで表示させられるために余計な項目を見せずに済み、分かりやすくなるでしょう。 今回は、HTMLで作成した2つのプルダウンメニューをJavaScriptで連動させて、1つの大きな選択機能を作る方法をご紹介いたします。 2段階に連動するプルダウンメニューの使用例 下記は、本記事で作成する2段階プルダウンメニューのサンプルです。最初に表示されているプルダウンメニューから何か項目を選ぶと、その選択内容に該当する2段階目のプルダウンメニューが表示されます。お使いのブラウザで直接操
![2段階に連動するプルダウンメニューの作り方 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a164eb985cfa3c677102951ec59bb37d6a81116/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F9%2F5%2F5%2F201701051234%2Ftopimg_original.png)
Effect | jQuery UI
<meta name="viewport" content="width=device-width, initial-scale=1">
CSS、javascriptで実現するタブインターフェイス集「30 CSS and Javascript Tabs Solutions」
TOP > WebDesign > CSS、javascriptで実現するタブインターフェイス集「30 CSS and Javascript Tabs Solutions」 数多くの情報をまとめて、限り有るスペースを有効活用することができるタブインターフェイス、情報量の多いサイトで主に利用されていますが、今回紹介するのはCSS、javascriptで実現するタブインターフェイスを集めたエントリー「30 CSS and Javascript Tabs Solutions」です。 Sweet Tabbed Navigation Bar using CSS3 デザイン的に凝ったものから、jQueryやCSS3を使って印象的に見せるものまで、様々なタブインターフェイスが紹介されています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Sweet
SleepingSnow - Treeview（リスト要素をツリー状のメニューに変更するjQueryプラグイン）
<script type="text/javascript"> $(document).ready(function(){ $("#sample").treeview({ control: "#treecontrol", //全省略等のコントロール部分divのID animated: "medium", //展開時の速度 collapsed: true, //class="open"の子メニューを展開した状態で表示 persist: "cookie" //cookieにより前回の状態で表示 }); }); </script> 【control】 全省略等のコントロール部分はIDを指定したdiv内にあるリンク要素の初めから、「全省略」「全展開」「展開／省略を反転」の機能を割り当てます。 3つより少ない場合はその分だけ割り当て、順序を変える事はできません。 【persist】 "coo
[JS]カラムの高さを揃える多機能なスクリプト -Equal Column Heights
カラムの高さを単に揃えるだけでなく、アニメーションで揃えたり、指定した値に揃えることができるスクリプトを紹介します。
写真枠をドラッグで写真を３Dっぽく回転させられるjQueryプラグイン「jQuery Reel」:phpspot開発日誌
写真枠をドラッグで写真を３Dっぽく回転させられるjQueryプラグイン「jQuery Reel」 2010年03月31日- jQuery Reel Plugin 写真枠をドラッグで写真を３Dっぽく回転させられるjQueryプラグイン「jQuery Reel」が公開されています。 マウスで写真をドラッグします くるっと回転します。 マウスドラッグだけでなく、マウスホイールを回転させても同じ効果が得られます。 ３６０度のパノラマ写真を回転させるようなことも出来るみたいです。 商品の詳細についてより訪問者に分かりやすく伝えるとか、３６０度のパノラマ写真をみせる際のUIに使えそうですね。
グリッドアコーディオンで新しい情報表示の仕方:phpspot開発日誌
Grid Accordion with jQuery | CSS-Tricks グリッドアコーディオンを新しい情報表示の仕方をjQueryで実現しているデモとサンプルコードが公開されています。 複数のカラムから１列が構成されていて、列の特定カラムをクリックするとそのカラムが拡大しつつ、列自体も拡大されます。 動き自体も面白いのですが、比較テーブルなんかで便利に使えるかもしれませんね。 にゅっ、とjQueryでアニメーションする部分もいいですね。 関連エントリ jQueryでアコーディオン作成のチュートリアル JavaScriptによる水平アコーディオンUI「Horizontal JavaScript Accordion」
ページを簡単にjQueryでポップアップ！ jQuery PopUpWinodow | バシャログ。
こんばんは、先日右のみパーマをかけたishidaです。 最近はページや画像をlightbox系で表示する機会が多くなってきましたが、ポップアップで表示することも少なくありません。 今回ご紹介するのは、jQueryを使ったポップアッププラグイン jquery.popupwindow.js です。 設置方法 配布ページよりデータをダウンロードし、ポップアップを利用したいhtmlのhead要素などでファイルを読み込みます。 <script src="jquery.js" type="text/javascript"></script> <script src="jquery.popupwindow.js" type="text/javascript"></script> 表示する部分は以下です。 <a href="DUMMY.html" class="popupwindow">ポップアップ</a
画像のズームアップ「jqzoom」-jquery plugin
このjQueryのプラグイン「jqzoom」は通販サイトなどで商品をズームアップして表示する時に役立ちます。 まずは配布元からダウンロード後、元画像・拡大画像を用意して、拡大表示の設定をするだけ。表示位置は（上:top、下：bottom、左：left、右：right）。・・ソースをご覧ください デモは左の写真にマウスをのせると右側に10倍ズームで表示されます。 配布元：jqzoom DEMO: ソース： <html> <head> <title>JQzoom Demo</title> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="jqzoom.pack.1.0.1.js" type="text/javascript"></script> <link rel="styleshee
超カッコいいApple風スライドショーギャラリー作成チュートリアル:phpspot開発日誌
超カッコいいApple風スライドショーギャラリー作成チュートリアルが公開されています。 次のようなカッコいいスライドショーが作れます。 デモページ コーポレートサイトのページのヘッダーなんかに入れ込むといい感じになるかもしれませんね。 以下のエントリを参照してください。 A Beautiful Apple-style Slideshow Gallery With CSS & jQuery ? Tutorialzine 関連エントリ スライドショー付きLightBox風イメージアルバムのサンプル jQueryでAjaxを使った滑らかアニメーション画像スライドショー スライドショーが可能なイメージギャラリー作成ライブラリまとめ 超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」
スライドショー風に背景画像を見せるJavaScript「jQuery maxImage plugin」｜skuare.net
twitter facebook hatena google pocket 背景画像をスライドショー風に見せるとサイトが印象的に見えます。 jQuery maxImage plugin: DemoはJavaScriptによりターゲット内の画像を最大表示してくれます。 これを利用して背景画像をスライドショーにします。 sponsors 使用方法 jQuery maxImage plugin: Demoからjquery.maximage.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.maximage.js"></script> <script type="text/j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery Mobile: Demos and Documentation
Daniel Raftery. Software Engineer.
jQuery Background Test
simplelib with jQuery
quackingduck's jquery.grid.js at master - GitHub
JavaScriptを使って画像の切り替え&LightBox使用