[B! jQuery][JavaScript] Biz-Rのブックマーク

[JS]簡単な記述で、軽快で滑らかなアニメーションが実装できるスクリプト -JSTween

オブジェクトの移動や拡大・縮小、不透明度の変更、CSS3のシャドウや角丸などを滑らかアニメーションで簡単に実装できるjQueryのプラグインを紹介します。アニメーションのエフェクトは、31種類！ JSTween [ad#ad-2] JSTweenの特徴 JSTweenのデモ JSTweenの使い方 JSTweenの特徴軽快に動作し、パフォーマンスに優れています。アニメーションを使った複雑なインタラクションが実装できます。フレームレートを使ったスムーズなアニメーション。実装はjQueryベースで簡単。簡単に始められ、シンプルに実行できます。 JSTweenのデモ

Biz-R 2012/07/06

リンク

Hello JS, Hello World. | JavaScript / et cetera.

今回はツールチップを自作してみます。 WordPressなどで構築したサイトの場合、前後のページに移動する際、ページのタイトルをリンクの文言に使用するケースが多くみられます。(まさにこのブログがその作りです) タイトルが極端に長い場合などを踏まえて、タイトルを画像に置き換えて、文言をツールチップで出してみましょう。続きを読む →

Biz-R 2011/08/19

twistcube kawamuraさんのチュートリアルブログ

リンク

第1回　ウェブブラウザとJavaScriptの未来 | gihyo.jp

こんにちは、id:os0xこと太田昌吾です。今回から、クロスブラウザ対策を中心としたJavaScriptの初級から中級の方向けの連載を開始します。JavaScriptの基礎的な文法は理解されているという前提での解説となりますので、ご了承ください（間違いやすい、わかり難いと思われるところは適宜補足します⁠）⁠。初回である今回はJavaScriptやウェブブラウザの背景など盛りだくさんの内容でお届けします。 JavaScriptのイマ JavaScriptは2010年現在において、最も重要な言語となりつつあります。旧来はすべての処理をサーバーで行って、結果をウェブブラウザ上に表示するだけというのがウェブの一般的な姿でした。2005年に登場したGoogle Mapsを一つの契機として徐々にウェブブラウザ・クライアント側での処理が見直され始め、近年ではクラウドやSaas、そしてHTML5の流行によ

Biz-R 2010/03/15

リンク

「吹き出し」をツールチップとして実装するjsいろいろ

マウスオーバー等で吹き出しが現れるツールチップのまとめです。 jQueryが殆どになります。吹き出しは画像やcssを変更すれば別の形状にする事も可能なのでうまく活用したいですね。吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tooltips Scripts With AJAX, JavaScript & CSS vTip 凄く可視性が高い吹き出し。フェードインで表示し、マウスオーバーの間はマウスストーキングします。使いやすそう。対象がテキストでも画像でもOK。試しに入れてみました。以下のリンクにマウスをあわせるとバルーンが現れます。角はcssで丸くしました。デフォルト状態だとマウスカーソルにarrow部分が重なってしまうので

Biz-R 2010/01/22

ツールチップ（吹き出し）を表示

リンク

Code Snippets | CSS-Tricks

A collection of code snippets for web developers, including code for HTML, CSS, JavaScript, PHP, WordPress, jQuery, HTAccess, and more!

Biz-R 2009/09/07

リンク

jQueryで交互にクラスを設定する - arekore

手作業でクラスを1つずつ設定するのは面倒なので、奇数列、偶数列を判別してクラスを設定する方法があった筈だと思いまずは自分で実際にサンプルを作ってみました。「WebクリエイティブのためのDOMスクリプティング」に掲載されていた方法を使用しました。使用したプラグインは、jQueryです。設定を記述するjsファイルに以下のように記す。 $(function(){ $('.stripe tr:odd').addClass('evenline'); $('.stripe tr:even').addClass('oddline'); }); 他の記述方法としては以下の通り。どちらでも同じ意味のよう。 $('table').each(function(){ $(this).find('tr:odd').addClass('evenline'); $(this).find('tr:even').ad

Biz-R 2009/08/13

一つおきに、とか。:odd :even を使う

リンク

[JS]ナビゲーションの現在位置の表示を自動で変更するスクリプト

ナビゲーションの現在位置を取得し、要素にクラス（activeなど）を追加してデザインを変更するスクリプトをCSS newbieから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> $(document).ready(function() { if(location.pathname != "/") { $('#nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); } else $('#nav a:eq(0)').addClass('active'); }); </textarea>

Biz-R 2009/08/03

リンク

訪問者驚きの手めくり風、画像ギャラリー作成サンプル:phpspot開発日誌

Create a unique Gallery by using z-index and jQuery | This Blog Use jQuery 訪問者驚きの手めくり風、画像ギャラリーを作成できるサンプル。以下がデモで、実際に試してみましょう。驚きの効果が得られるはずです。 HTML定義部分。分かりやすいコードも魅力です。  <div class="grid_6 prefix_1 suffix_1" id="gallery"> <div id="pictures">  <img src="images/picture1.png" alt="" /> <img src="images/picture2.png" alt="" /> <img src="images/pictu

Biz-R 2009/03/25

リンク

Thematic WordPress Theme Toolbox: 10 extremely useful hooks

When building a website, using a CSS framework is a real time saver as it provides you with tools every web designer and front-end developer needs when crafting a site (other than good web hosting). A CSS framework is a software framework created to allow for easier, more standards-compliant web design using HTML/CSS. Many popular CSS frameworks are design-oriented and contain elements that can be