Clusterize.js
<!--HTML--> <div class="clusterize"> <table> <thead> <tr> <th>Headers</th> </tr> </thead> </table> <div id="scrollArea" class="clusterize-scroll"> <table> <tbody id="contentArea" class="clusterize-content"> <tr class="clusterize-no-data"> <td>Loading data…</td> </tr> </tbody> </table> </div> </div> <!--HTML--> <div class="clusterize"> <table> <thead> <tr> <th>Headers</th> </tr> </thead> </table> <
8188www威尼斯(中国)有限公司-首页|欢迎您点击
最可能的原因: 指定的目录或文件在 Web 服务器上不存在。 URL 拼写错误。 某个自定义筛选器或模块(如 URLScan)限制了对该文件的访问。 可尝试的操作: 在 Web 服务器上创建内容。 检查浏览器 URL。 创建跟踪规则以跟踪此 HTTP 状态代码的失败请求，并查看是哪个模块在调用 SetStatus。有关为失败的请求创建跟踪规则的详细信息，请单击此处。
Experimental Vertical Menu with jQuery Tutorial | Demo | Queness
A fancy vertical menu that is moved by mouse interaction.
Sticky-Kit | jQuery plugin for sticky elements
Reference To install include jquery.sticky-kit.js after including jQuery. Usage: $("#sticky_item").stick_in_parent(); // or $("#sticky_item").stick_in_parent(options); You can pass a hash of options to configure how Sticky Kit works. The following options are accepted, each one is optional: parent — The element will be the parent of the sticky item. The dimensions of the parent control when the st
jQueryで作るスクロールしたら出現してスクロールに追随し、フッターの位置で止まるスムーススクロール
言葉で説明すると難しいのですが、よくあるスクロールすると「ページトップへ」のボタンが出現して、そのままスクロールに合わせてついてくるものを、そのままページ下までついてこさせずにフッターの位置で止める方法です。IEはバージョン7以上で動きました。 「サンプル」を作りましたのでこちらをご覧頂ければわかりやすいかもしれません。 （サンプルデモのコードは一番下にあります。） ページトップボタンのHTML ページトップボタンのHTMLは以下のようにします。 <p class="gotop"> <a href="#"> <img src="images/gotop.png" alt="ページトップへ戻る"> </a> </p> CSS ページを包んでいる一番親の要素へrelativeを設定します。 #container{ position:
プレロード（先読み）｜jQuery plugin｜Ajax｜PHP & JavaScript Room
ページロード完了後に指定した間隔で画像をフェードイン表示していく方法が掲載されています。 ページロード時にページ上の画像をすべて隠しておき、完全にページが読み込まれたら、ページ上の画像を上から順に配置されている順にフェードイン表示するようになっています。 <!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
jQuery スクロールで記事の自動読み込みを実現する方法 – グリッドレイアウトにも対応 – infinititescroll等 | Stronghold Archive
jQuery スクロールで記事の自動読み込みを実現する方法 – グリッドレイアウトにも対応 – infinititescroll等 どうもこんばんは。今回のtipsは【jQuery スクロールで記事の自動読み込みを実現する方法 – グリッドレイアウトにも対応】についてです。自動読み込みと書きましたが、クリック等の手動も可能です。結構見かける手法ですのでメモしておきます。 自動読み込み用プラグイン【infinitescroll 】 インフィニティスクロール、このプラグインを使えば簡単に自動読み込みを実現してくれます。設置方法も簡単で非常に優秀なプラグインです。 スクロールで自動読み込み <div id="blogBody"> <div class="post">….</div> <div class="post">….</div> <div class="post">….</div> </d
スクロールするだけでコンテンツを読み込むプラグイン「jQuery.autopager」 | PLUS
よく見かけるページングの処理で、下の方にスクロールすると自動的に次ページを読み込ませる処理をかんたんに実現してくれるjQuery.autopagerが便利でした。jQueryプラグインです。 導入がかんたんで分かりやすく、オプションも必要最低限のものがバッチリ揃っています。例えば、スクロールで下部までいったら自動的に次コンテンツを表示させるか、それともボタンをクリックして読み込むか、読み込み後にコールバックで関数を読み込ませるか、などなど。 jQuery.autopagerの導入方法 まず、jQuery本体とダウンロードしたjQuery.autopagerを読み込んでおきます。 そして、スクロールで自動表示させるなら下記だけでOK。 <script type="text/javascript"> $(function() { $.autopager(); }); </script> <
scrollorama
How To Use Disclaimer: This is an experimental, just-for-fun sort of project and hasn’t been thoroughly tested. Design and build your site, dividing your content into blocks. ★ ★ ★ Embed scrollorama.js after jQuery and initialize the plugin, passing the blocks class selector as a parameter. $(document).ready(function() { var scrollorama = $.scrollorama({ blocks:'.scrollblock' }); }); ★ ★ ★ Target
jquery.pep.js | kinetic drag for mobile & desktop
jquery.pep.js is a lightweight jQuery plugin which turns any DOM element into a draggable object. It works across mostly all browsers, from old to new, from touch to click. I built it to serve a need in which jQuery UI’s draggable was not fulfilling, since it didn’t work on touch devices (without some hackery). All of Pep’s options are outlined on Github, so take a look. Feel free to email me with
[JS]スマフォで各セクションのヘッダをそれぞれスクロールに追従させるスクリプト
iPhone, iPad, ガラケーなどのスマフォで、各セクションのヘッダをそれぞれ半透明の状態でスクロールに追従させるスクリプトを紹介します。 A, B, C と追従中 対応ブラウザ iPhone 4GS (iOS5) iPhone 4G (iOS5) iPhone 3GS (iOS5) iPad 3 (iOS5) iPad 2 (iOS5) Galaxy S3 (Ice Cream Sandwich) Galaxy S2 (Gingerbread) NEXUS S (Jelly Bean) 実装 Step 1: 外部ファイル 外部ファイルは下記の2つのスクリプトと当スクリプト・スタイルシートをhead内に記述します。 zepto.js jQueryと互換性のあるモバイル用軽量ライブラリ iscroll.js モバイルでposition:fixedを実現するスクリプト <script s
[JS]表組みのヘッダを固定し、表示する列も選択できるスクリプト
左上のアローをクリックすると、チェックボックスが表示されます。 スクリプトはクッキーにも対応しており、選択した列をクッキーに保存することも可能です。 スクリプトはjQueryのプラグインのため、実装にはjquery.jsが必要です。 オプションでは、テーブルの幅と高さ、列選択の有無、クッキーの有無を設定できます。基本の書式は下記のようになります。 JavaScript <textarea name="code" class="js" cols="60" rows="5"> $(tableID).scrollableFixedHeaderTable(widthpx, heightpx, showSelect, cookie) </textarea>
yuga.js 0.4.2 - 優雅なWeb制作のためのJS｜CSS HappyLife
通常のロールオーバー 動作テスト サンプルのソース <p> <img src="./img/yuga/btn_more.gif" alt="more" class="btn" /> </p> 説明 img要素にclass="btn"が有る場合、src属性を「_on」付きのものに差し替える [New]グループ化されたロールオーバー 動作テスト テキスト。 サンプルのソース <p> <a href="./hoge.shtml" class="btngroup"> テキスト。<img src="./img/yuga/btn_more.gif" alt="more" class="btn" /> </a> </p> 説明 img要素の親要素にclass="btngroup"があり、img要素にclass="btn"が有る場合テキストにマウスカーソルを当てても画像がロールオーバーする。 現在のページ
[JS]Page Scrollerと他のjQueryプラグインとの実装サンプル
当サイトで配布している「簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3」と他のjQueryプラグインとの実装サンプルの紹介です。 Smart Floating Banners パネルがスクロールに追随して表示されます。 配布元：Smart Floating Banners Smart Floating Banners ユーザーのスクロール操作、Page Scrollerの挙動のスクロールにパネルが追随します。 パネル上の「Top of Page」は、Page Scrollerの挙動です。 Tips: フロートするパネルは画像など実体がある方がベターです。 サンプルのようにスタイルシートの矩形の場合はwidth, heightなどしっかり指定します。 jQuery Footnotes 脚注を抽出し指定箇所に配置します。相互リンクは自動
[JS]ドラッグベースのいろいろなインターフェイスが実装できるスクリプト -Dragdealer JS
Dragdealer JS デモ スクリプトはjQueryなど他のスクリプトに依存せずに動作し、圧縮版は12KBと軽量なものになっています。 以下に公開されているデモを紹介します。 シンプルなスライダー
ボックス内をスクロールすると自動でコンテンツをロードするjQuery - かちびと.net
IE6でも7でも動いてくれるのと なかなか使い勝手も良さそう なのでメモ。jQueryを使った コンテンツボックス内の自動 読み込みを実装します。 去年くらいの記事ですけど見逃してたのでメモ。 Facebookをやられてる方はピンと来るかも。下までスクロールすると自動で次のコンテンツが読み込まれますが、それをボックス内で実装したものです。基本的にどのブラウザでも動くみたいです。 Scrolling Dynamic Content box このボックス内でスクロールすると自動で次のコンテンツが読み込まれ、アイテムの数も表示されます。というか、見たほうが早いですね。 デモ コード コードです。 $('document').ready(function(){ updatestatus(); scrollalert(); }); function updatestatus(){ //ロードしたアイ
カーソル位置によって自動スクロールする小窓実装ライブラリ:phpspot開発日誌
woork: Using CSS and Mootools to simulate Flash horizontal navigation effect カーソル位置によって自動スクロールする小窓実装ライブラリ。 枠の右端に移動すると、右にズイズイとスクロール、左に移動すると左へスクロールするような小窓を実装するためのライブラリが公開されています。 クリックでデモを表示 次のように、見えている部分と、隠している部分をCSSによって出し分けています。 JavaScriptによってスクロール処理を実装。 横スクロールしていくようなＵＩの実装に使えそうです。 また、サンプルのような大きいブロックではなく、小さい領域で、いくつかの情報を格納するのにも便利そうですね。 mootools+CSSで実装されているようです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://joelb.me/scrollpath/