jQueryで作るボタンでスライドするローテーションバナー
Posted: 2010.12.27 / Category: javascript / Tag: jQuery 以前に「jQueryで作るスライドするローテーションバナー」というのを作成したのですが、結構シンプルな作りでちょっと今の時代のあれじゃないよね。ということでボタンをクリックすると次の画像に進んだり戻ったり、ページネーション的なボタンを追加することで、ちょっとだけ実用的なものにしたいと思います。 html+cssを制作する まずはhtmlとcssですね。 「id=banner」divにはメインとなるローテーションさせる画像をリストで配置。 その下の「id=btn-prev」「id=btn-next」は次へ進むボタンと戻るボタンです。 「id=pagenation」にはページネーションボタンが配置されています。 divがちょっと余分じゃね？ って感じがしますが、横並びでセンター揃えに
jQuery公式プラグイン・レジストリが公開。GitHubと連携など、今風の仕組みに惚れ惚れ
白石 俊平 ニュース jquery 0 Comment 2013年1月17日、jQuery「公式」のプラグイン・レジストリ（プラグインの集積場）が公開されました！ URLはこちらになります。 http://plugins.jquery.com/ このプラグイン・レジストリの目的は、従来のプラグインサイトでは解決できなかった、「断片化」と「配布」の問題を解決することだそうです。 「断片化」・・・「jQuery プラグインがWeb上の至る所にあり、探すのが面倒」という、現在の状況 「配布」・・・作成したプラグインを配布するためのサイト作成や宣伝に手間がかかる、従来のプラグインサイトでは登録が面倒だった 新しいプラグイン・レジストリは、GitHubと連携することを前提として、こうした問題をエレガントに解決し、従来のプラグインサイトを完全に置き換えるものです。 開発者にとっては、プラグインを公開
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
テキストを要素内にうまく収めてはみ出させないjQueryプラグイン「trunk8」:phpspot開発日誌
trunk8 | Rick Viscomi テキストを要素内にうまく収めてはみ出させないjQueryプラグイン「trunk8」 WEB開発に携わる人なら必ず経験する、要素からのテキストのはみ出しやレイアウト崩れ。 指定したサイズの要素ないのテキストは、どんなものが入ってきても綺麗にまるめたい、という場合に使えます。 元のテキストが以下のようにあったとします。 スクリプトを読み込んだ後、$(elem).trunk8(); とJSで記述すると次のように一瞬で1行に収めることができます。 （オプションで行数指定も可能） 綺麗に要素内に収める「もっと読む」も次のように実現できます。 省略バージョンはきっちり枠内にはまっていますね。これをJSとライブラリレスで実現するのはなかなか難しい所がありますね。 これは便利。 関連エントリ テキストをブロックの中にフィットするように自動リサイズできる「jQue
jQueryでページ遷移時にスライドアニメーションをつけてみる【改訂版】｜BLACKFLAG
かなり前に「jQueryでページ遷移時にアニメーション効果をつけてみる。」と題して、 jQueryでページ遷移時に画面をスライドさせるアニメーション効果をつけるSCRIPTを紹介しましたが、 どうやらブラウザによって、画面遷移後にブラウザの「戻る」ボタンで前画面に戻ると 遷移時にアニメーション用の動作として操作したCSSの指定が残ってしまって 画面が真っ白になることがあったので、その不具合対応版を作ってみました。 jQuery PAGE SLIDE MOVE まずはサンプルから 【改訂版】サンプルはこちら※「次へ」をクリックしていくとページ全体がスライドして遷移します。 画面内の「次へ」などをクリックして画面遷移した後、 ブラウザの「戻る」ボタンを押しても画面が真っ白にな現象は発生しないと思います。 ※以前の記事のサンプルはブラウザによって画面が真っ白になります。 以前の記事の内容から H
jQueryで正規表現を学んでみる。【基礎編】
Posted: 2010.11.14 / Category: javascript / Tag: jQuery, 正規表現 正規表現といえばフォームチェックがぱっと思いつきますが、最近ではjQueryで外部APIで様々な情報を取得する機会が増え、それによって文字列の置き換えなどもできるようにならんとな、と思ったりしている人も増加しているはず！ ということでお手軽に使えるjQueryを使用して正規表現をちょこっと勉強してみようと思います。 文字列を置き換える基本の形 正規表現の前にjQueryで単純な文字列を取得して、置き換えて表示するということをしてみます。 html <p> 正規表現はjavascript以外のプログラムやテキストエディターなどの検索でも使えます。でもここではJavaScriptを使うんです。 </p> 例えばここにpタグでマークアップされた文字列があります。 「java
[JS]jQueryを使って、超スムーズなCSS3アニメーションを実装する -jQuery Transit
昨日に続いて、jQueryとCSS3アニメーションのコラボです。 今回紹介するのは、jQueryでCSS3アニメーションを超スムーズにするように助けるプラグインです。 jQuery Transit デモページ [ad#ad-2] jQuery Transitの使い方 jQuery Transitのデモ jQuery Transitの対応ブラウザ jQuery Transitの使い方 「jquery.js」の後に当スクリプトを外部ファイルとして記述します。 外部ファイル <script src='jquery.js'></script> <script src='jquery.transit.js'></script> あとはjQueryの「.animate」の代わり、「.transiton」を使用してアニメーションを実装します。 $('...').transition jQuery Tra
[JS]リスト要素で簡単に実装できるニュースティッカー -jQuery News Ticker
アニメーションで次々に表示するニュースティッカーを実装するjQueryのプラグインを紹介します。 IE6+をはじめ、スマフォ用のSafari Mobileにも対応しています。 jQuery News Ticker デモ [ad#ad-2] jQuery News Tickerの実装 jQuery News Tickerの実装 外部ファイル スタイルシートとスクリプトを外部ファイルとして指定します。 <link href="styles/ticker-style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script src="in
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
finefinefine.jp