Easy to Style jQuery Drop Down Menu Tutorial | Queness
Introduction Alright, this time, we are going to make a drop down menu. The main objective is to make it as simple as possible, with some little jQuery effect and easy to customize/ apply different style on it. To style it into your own design, you just have to modify the a tag CSS style. You can put background images, hover effect and also change the submenu popup animation. Before we start, I ha
画像のキャプション表示｜jQuery plugin｜Ajax｜PHP & JavaScript Room
画像にマウスオーバーするとキャプションをオーバーレイ表示するjQueryプラグイン。 オプションのパラメータで、キャプションを表示するときのアニメーション効果（フェード、スライドなど）やアニメーション速度、透明度などを指定することができます。 下記の2つのサンプルが掲載されています。 img要素のalt属性をキャプション表示 <img src='画像URL' class='captify' alt='キャプション' /> imt要素のrel属性とdiv要素のid属性を関連付けて、div要素の内容をキャプション表示 <img src='画像URL' class='captify' rel='caption1' /> <div id='caption1'>キャプション</div> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
画像とキャプションをスムーズに表示するギャラリーJavaScript「s3Slider」
LightBoxが巷にあふれる中、画像をより良く見せたい欲求は高まっていることでしょう。 s3Sliderでは、JavaScriptライブラリ「jQuery」を使用し、画像・キャプションにエフェクトをつけ、閲覧者の興味を喚起する仕組みを提供します。 sponsors 使用方法 s3Sliderから、ファイル一式をダウンロードできます。 サンプルもついてくるので、基本的にはそれを見ればわかると思います。 以下のように書くことで可能です。 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="s3Slider.js"></script> <script type="text/javascript"> $(document).ready(func
ALTでキャプションをふわりと表示：jQueryプラグイン「jCaption」
画像にキャプションをつけることは多いと思います。 でも、みんなと同じような見せ方は嫌だという方には、こんな方法もあります。 jQueryプラグイン「jCaption」はaltに記述したものを画像の上に乗せて表示できます。 sponsors 使用方法 jCaptionからjcaption.min.jsを、jQueryからjquery.jsをダウロードします。 <style> img {border:none;} div.caption {margin: 0;padding:0;position: relative;} div.caption p {position: absolute;margin: 0; padding: 2px;font-size: .9em;bottom: 0;left: 0;background:black;color: white;opacity: .7;} div
画像のキャプションをクールに表示するJavaScript「jQuery Captify Plugin」
画像に説明をつけるキャプションは重要ですが、配置場所は大抵決まっています。 しかし、デザイン性を重視すると画像に乗せたいなど出てくるでしょう。 今回紹介するjQuery Captify Pluginはそれを簡単かつクールに表示可能です。 sponsors 使用方法 jQuery Captify Pluginからcaptify.tiny.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="captify.tiny.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('img.
jQuery custom content scroller – malihu | web design
When upgrading from version 2.x to 3.x it’s important to use version 3 CSS and .png files. Version 3 is backwards compatible but it’s also a huge overhaul. One significant change is that you don’t need to call the update method manually (the script does it automatically). For more info see changelog. Version 2 is still maintained and updated here. Get started Configuration Methods Styling Callback
スクロールバーをデザインするのに使えるjQueryプラグイン「Custom Scrollbar」 | Web活メモ帳
「Custom Scrollbar」はスクロールバーのデザインとスクロール量をカスタマイズできるjQueryプラグインです。 デザイン以外にも、イージング、マウスホイールへの対応など多彩なオプションが設定可能になっています。 OSが変わっても同じ見せ方をしたい場合などに良さそうですね。 詳しくは以下 デモ 多彩なオプション機能 以下のようなオプションが設定可能です。 スクロールの方法（縦か横） スクロール量 イージング量（スクロールを停止した後の慣性の量） スクロールバーの幅と高さ マウスホイールのサポート 使い方 jQueryやjQUery.uiなどのライブラリをheadタグで読み込みます。 <link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" /> <script src="http://aj
jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 １）3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryランダム表示プラグインと、jQueryプラグインの書き方 | JavaScript | むらQ
5509.me
CSS Border Radius with jQuery Sliders
tekmemo.net