チェックボックスにチェックしたらコンテンツを表示させる - かちびと.net
Result jQuery $('#check').click(function() { //クリックイベントで要素をトグルさせる $("#box").slideToggle(this.checked); }); css input{margin:80px 0 0 80px;} div{ display:none; margin:25px; padding:25px; background:#eee; width:200px; height:150px; } html <label><input type="checkbox" id="check">Check This!</label> <div id="box">content is here</div>
jQueryでレスポンシブ対応かつ切替可能なモーダルを作成する方法 | 株式会社チップディップ
今回は切り替えが可能なモーダルウィンドウの作成方法をご紹介します。 まずはデモページを用意したのでご覧ください。 今回はこれを作っていきたいと思います。レスポンシブにも対応していますので使い勝手は良いかと思います！ それでは早速、次項から詳しく説明していきたいと思います。 HTMLを記述 まずはHTMLを記述していきます。 HTMLを記述する <head> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="js/func.js"></script> </head> <body> <di
Fullscreen Slit Slider with jQuery and CSS3 | Codrops
A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements. In this tutorial we’ll create a fullscreen slideshow with a twist: we’ll slice the current slide open in order to reveal the next or previous slide.
[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
![[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/eb35406166a9bab01fb02a6a7949249bd7191347/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014092904-01.png)
スマホアプリのように横からスライドするメニューのjQueryプラグイン「mmenu」 – bl6.jp
mmenuというjQueryプラグインを使えば、スマホアプリのように横からスライドするメニューを実装することができます。実際のデモではレスポンシブになっており、画面を縮小するとメニューがアイコンに切り替わります。このアイコンをクリックすると横からメニューがスライド表示されます。メニューが多階層にも対応しているのがいいですね。 [ads_center] mmenuの使い方 mmenu 使い方は、まずhead内に以下のjQuery本体とプラグインファイルを読み込みます。 <script src="jquery.js" type="text/javascript"></script> <script src="jquery.mmenu.min.js" type="text/javascript"></script> <link href="jquery.mmenu.css" type="text
テーブル内の行やセルなどの要素をドラッグ＆ドロップで自由に配置できるスクリプト・REDIPS.drag
使い方<script type="text/javascript" src="redips-drag.js"></script> <script type="text/javascript" src="script.js"></script>ライブラリと設定用のjsファイルを読み込んでマークアップするだけです。 デモのマークアップは以下のような感じ。 <div id="drag"> <table> <colgroup> <col width="30"/> <col width="100"/> <col width="100"/> <col width="100"/> <col width="100"/> <col width="100"/> </colgroup> <tbody> <tr> <th colspan="6" class="mark">テーブル</th> </tr> <tr c
サイドバーをスクロールに合わせてついてくるようにできるjQueryプラグイン-Contained Sticky Scroll ｜ memocarilog
サイドバー等のボックスを下にスクロールしても一緒についてスクロールするようにできるjQueryのプラグインです。右上のアイコンをクリックで一緒にスクロールするのをやめる事もできます。 設置も簡単にでき、IE6にも対応しています。 配布先とデモページ 配布先：Contained Sticky Scroll サイトの真ん中くらいにある下の画像の箇所をクリックでダウンロードできます。ダウンロードファイルの中にデモやjQueryのファイル等一式入っています。 デモ：Contained Sticky Scroll Demo 使い方 ヘッダー内に下記を記入してjQuery本体とプラグインを読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-
skitter が設置しやすくてカッコイイ！導入メモ:susi-paku website
公開日：2011年5月16日 カテゴリ：Web制作が捗るツール jQueryを使ったスライドショーというと、多くの有志の方がリリースしているジャンルなわけでFLASHにとって代わるくらい利用され始めていますね。('A') といっても、設置が面倒だったり表示が単調だったり自作できない人にとっては導入を見送るの事もあったと思います。今回紹介するSkitter は豊富なエフェクトを備えかつ、設置・設定が非常に簡単だったので導入用のメモを含めて書いておきます。 2012/3/19 プログレスバーやアニメーションの追加など大幅アプデートがされたので再度記事を書きました。こちらもどーぞ。 30以上のアニメーションにプログレスバーの追加など多機能スライドショーSkitterが本当にすごい！導入方法など｜susi-paku web Skitter - Slideshow for anytime! Skit
『JCarouselとLightBoxを使って拡大出来るスライドギャラリーを作りました。』
JCarouselとLightBoxを使って拡大出来るスライドギャラリーを作りました。 | 日々是精進 でも マイペースでね。
エフェクトが無駄に凄いイメージスライダーを実装出来るjQueryプラグイン・Chop Slider - かちびと.net
実用性は別にして、こういうの嫌いじゃない ので記事にします。よくあるイメージギャラリー なんですが、画像が変わる際のエフェクトが 無駄に凝っています（褒め言葉です）。こんな 事もflashを使わないで出来るんだなー、と 素直に関心したので、同じ気持ちで見て 頂けたら嬉しいです。 エフェクトはかなり多く用意されており、どれもなかなか派手な印象です。これだけのエフェクトをクロスブラウザに対応させているのもちょっと驚きです。※IE6にも対応とあるのですが、現在諸事情で確認出来ませんので対応してなかったらごめんなさい。 えらいこっちゃ・・なエフェクトばかりです。エフェクトはかなりの数が用意されており、１つのエフェクトも細かい設定が可能になっています。 まずはエフェクトの一部を無言でご紹介します。 ちょっとヒーローとかの変身シーンみたいな感覚です・・実際に動きを見てもらうと、いかに無駄にすごい動きか
jQuery TOOLS - The UI library for the Web
Demo Area A small list of things you can do with this library. 1. Tabs The most important UI widget on the web Minimal setup for tabs Naming the tabs 3 different skins with CSS Loading tab contents with AJAX Handling browsers back button AJAX:ed tabs with History support Using mouseover to switch tabs Making Wizards with the Tabs Making Accordions with the Tabs Customizing the Accordion e
Ajax » jQuery plugin » 画像ポップアウト・イメージギャラリー・スライドショー
Google Codeで公開されている、jQueryを使用したJavaScriptノイメージギャラリーです。 他のライブラリのように、サムネイル画像を用意する必要はなく、原寸大画像をロード時に自動的にリサイズしてサムネイル画像として表示してくれます。 デモ1 設置イメージ1 galleria デモ1の設置サンプルサンプルを見る<!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" con
要素を回転表示させるJavaScript「jQuery Carousel」
amazonなどでは、書籍を回転表示させ一覧性と省スペースを兼ね備えています。 jQuery Carouselを使用することで、似たよう表示が可能です。 sponsors 使用方法 jQuery Carouselからjquery.carousel.jsを、jQueryからjquery.jsをjQuery Easing Pluginからjquery.easing.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.carousel.js"></script> <script type="text/javascript" src="jquery.easing1.3.js"></script> <script t
jQuery vs MooTools（和訳） | 高橋文樹.com | プログラミング
jquery.com、mootools.netとwikipedia.comからの情報による モットーがすべてを語る jQueryサイトに行けば、ページのトップ付近にjQueryとはなんであるかが述べられている: jQueryは高速で簡潔なJavaScriptライブラリです。HTML文書の走査、イベント操作、アニメーション、Ajaxインタラクションをシンプルにして、Webサイト開発を高速にします。jQueryはJavaScriptの書き方を変えるために設計されました。 …そしてMooToolsに行けば、このような文言が見つかるだろう: MooToolsは中級から上級のJavaScript開発者のために設計された軽量で、モジュール化された、オブジェクト志向のJavaScriptフレームワークです。これを使えば、エレガントで、きちんとした裏付けのある、一貫したAPIにより、パワフルに、柔軟に、そ
jQueryとmootoolsを同時に使う方法
ネタ元：mootoolsとjQueryを一緒に使う方法 | チバのブログ 以前から試してみよう、試してみよう！と何度も思ってやってこなかったことで、 jQueryとMootoolsを同時にしようしたい！という気持ちがあった。 jQueryとprototypeの同時使用は以前から知っていたのですが、 同じ方法でjQueryとMootoolsの同時使用ができるのですね！ jQueryは指定とかが簡単なライブラリだけど、 いろいろな動作をさせるにはmootoolsの方が動きが綺麗だなと思っていた。 海外のサイトではjQueryも使われているが、 なんとなくMootoolsも多く使われている印象があったので、 今後の参考として、同時に使う方法をメモとして残しておきます。 ポイントは指定の順番らしい ライブラリを読み込む順番が重要で、 順番通りに書かないとエラーで動作しなくなるようだ。 指定の順番は
css-lecture.com - css lecture リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Galleriffic | A jQuery plugin for rendering fast-performing photo galleries
Usage Download the latest version of Galleriffic and jQuery 1.3 (also works with jQuery 1.2.6 ... use other versions of jQuery at your own risk) View the source of this page to see a full-featured example setup. All container selectors are optional, so you may choose to not include an area (such as the loading container or caption container). Here is an example of all the elements needed for a f
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
写真スライド jCarousel - Riding carousels with jQuery
http://caroufredsel.frebsite.nl/
4つのバリエーションに変えれるLightbox風のスクリプト ColorBox | CSS Lecture