Elastic Slider 斬新な切り替えエフェクトをもつスライダー実装「Elastic Slider」 スワイプでびよーんと画像が切り替わります 関連エントリ 日付や時間を指定するスライダーUI実装「jquery-time-slider」
Elastic Slider 斬新な切り替えエフェクトをもつスライダー実装「Elastic Slider」 スワイプでびよーんと画像が切り替わります 関連エントリ 日付や時間を指定するスライダーUI実装「jquery-time-slider」
プログラマーにとって便利なプログレスバーのJavaScript Plugins「 9 Free Progress Bar JavaScript Plugins For Web Designers」 Webサイト閲覧中によく見かけるプログレスバーですが、最近は動きや形も様々で遊び心のあるものも増えてきています。そんな中今回は、プログラマーにとって便利なプログレスバーのJavaScript Plugins「 9 Free Progress Bar JavaScript Plugins For Web Designers」の紹介したいと思います。 Animated Goal Progress Bar jQuery plugin ベーシックなものから、ちょっと変わったものまで9種類のプログレスバーがピックアップされています。 詳しくは以下 ProgressBar.js – Progress bar
GitHub - simonsmith/jquery.stickyTableHeader: Small, accessible sticky table header plugin スクロールしても項目が分かりやすいヘッダー固定「jquery.stickyTableHeader」 通常のテーブルの欠陥を補うプラグインです。 関連エントリ テーブルをサクッとレスポンシブ対応にする「resTables」 テーブルをブラウザ上で組み立てられるUI実装「a-table」 テーブル等のヘッダをスクロールしても超簡単に固定できる「jquery-sticky-header-footer」 テーブル行の詳細をクリックで開けるテーブル実装
画像やカード型コンテンツをレンガ状に敷き詰めて配置する、レスポンシブ対応のMasonryレイアウトを簡単に実装できる超軽量(4kb)スクリプトを紹介します。 jQueryやCSSなど、他のファイルは一切不要で、単体で動作します。 Macy.js Macy.js -GitHub Macy.jsの特徴 Macy.jsのデモ Macy.jsの使い方 Macy.jsの特徴 4kbの超軽量のライブラリ、他のファイルには一切依存しません。 レスポンシブ対応、ブレイクポイントは簡単にカスタマイズできます。 HTMLは非常にシンプルな構造です。 CSSトランジションで動作します。 シンプルなイベントAPIを備えています。 Macy.jsのデモ 実際の動作は、デモページで楽しめます。 動作は非常に軽快で、快適です。
jQuery Menu 階層的な右クリックメニュー実装「jQuery Menu」 次のような右クリックメニューをブラウザ上で実現できます。特定要素上のみといった使い方が可能 関連エントリ レスポンシブに使えるメガメニュー実装jQuery「SmartMenu」 ハンバーガーメニューを実装するならコレかもという「Ember Burger Menu」 シンプルなサイドメニュー実装「sideToggle」
WEBシステム、WEBプログラム開発において昨今ではjQueryではなくVue.js、React、AngularなどのJSフレームワークが主流となってきています。ただ、これらの活用は学習コストが高いといわれています。その原因はフロントエンドありきで話が進みすぎていたからだと考えています。したがって、自分の投稿記事は、jQueryを多用するWEBシステムエンジニアに向けた、フォーム操作をメインに置いた半備忘録兼自分なりに解釈した解説です。 ちなみに自分はサーバ構築からバックエンドまでこなしているワンオペエンジニア(フリーランス、非正規雇用に非ず)です。 コンポーネント、ルーティング、スタイル周りの続編を作成しました(編集が困難になるほど容量圧迫してたので、それぞれで独立させています)。また、Vueは3.2から採用されたscript setup、Angularは14から採用されたスタンドアロン
本日はJavascriptとjQueryで左右のボタンを押したら、画像が横にスライド表示できる方法を解説していきたいと思います。 まずは下記の完成後の左右のボタンをクリックして、どのような動作になるかをご確認ください。 今回は1~5までの数字5枚の画像を使用します。 【完成後】 画像が表示されない場合はCtrl + F5 キーを押してみてください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く