少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
画像や動画を綺麗に回転/拡大するjQueryプラグイン
ステップ2：XHTMLで骨格を定義する <body>要素に<ul#hcarousel>要素を追加したら<li>要素を入れ子にして花の画像を3個配置します。同様の手順で<li>要素を追加したら湖と自然の画像をそれぞれ3個配置します。 <ul id="hcarousel" class="jcarousel-skin-tango"> <li><img src="images/flower/pic1.jpg" alt="" /></li> <li><img src="images/flower/pic2.jpg" alt="" /></li> <li><img src="images/flower/pic3.jpg" alt="" /></li> </ul> ステップ3：jCarouselプラグインを組み込む <head>要素に<script>要素を追加したら、次のようなコードを追加してjCaro
jquery.toggleElements.js - Toggle HTML-Elements with jQuery
jquery.toggleElements.js - Toggle HTML-Elements with jQuerytoggleElements is designed to hide informations on your site and show it only when the user requests more information. Features unobtrusive script, simple to setup full customizeable via CSS only a class and a title-attribute must be added to your original HTML nesting toggleElements is possible This page uses jQuery Version Version
jQueryのアコーディオン効果の使い方・作り方
ステップ3：XHTMLで骨格をデザインする <body>要素に<h2.trigger.red>要素と<div.toggle_container>要素を追加します。<h2>要素には、<a>要素を追加して見出しを定義します。<div>要素には、コンテンツを定義します。ここでは、イメージとダミーテキストを定義しています。同様の手順で、4個の見出しを定義します。 <h2 class="trigger red"><a href="#">見出し#1</a></h2> <div class="toggle_container"> <div class="block"> <img src="css/images/thumbnail.gif" alt="" /> <p> Lorem ipsum ius an duis discere democritum, sit at suas persius iudic
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery BeforeAfter Plugin Demo