bxsliderで2枚目以降の画像もブラウザ幅いっぱいに表示してみる。 | らうんじ
もともとbxsliderにはカルーセル表示をすることができるオプションがあるんですがコンテンツの幅を固定、またはmax-widthを指定してある場合、少し工夫をしてあげないとうまくいきませんでした。それからnext/prevのアイコンをクリックするとスライドショーが停止して動かなくなるという現象が起きていたので動くように変更しました。 以下サンプルページ http://gallery-lounge.com/demo/bxslider/ bxslider head bxsliderを自分のサーバーへアップロードし以下記述。easingを適用するならダウンロードしたファイル内にあるeasingファイルもアップロードしてください。 ※ファイルパスはご自身の環境に合わせて記述。 <script src="../js/jquery.bxslider.js"></script> <script src
透過PNGをIEできちんとopacityさせたい ｜ Tips Note by TAM
透過PNGをIE6/7/8にエラーなく反映させたい時、みなさんどのように対処されていますか？ 今回、つまずきがちなその問題に立ち向かうべく、私なりに色々と調べてみました。 有用と思しき記事に出会うたび、リンク切れだったり、ちょっと難しかったりしたので、 簡単にわかりやすく、次に自分が対応するときのことも考えて記事に残したいと思います。 今回はMach3.laBlogさんのページを参考に実際のサンプルを作っていくことにいたしました。 【参考サイト】 IEの透過PNG+opacityの不具合を治すメモ | Mach3.laBlog 透過PNGをIE6で使用する際に有名なのは「DD_belatedPNG」ですが、 IE6向けのライブラリのため、IE8ではエラーが出てしまいます。 IE6/7/8全てに透過PNGを対応させるため、Mach3.laBlogさんの記事を元に、 「DD_belatedPN
均等割り付け超軽量jQueryスクリプト配布場所 | web屋 内藤
仕事上必要だったので、拙筆「webkit系ブラウザ（Chrome/Safari）で両端揃えはできないの？jQueryで検証」のスクリプトを流用して作りました。 簡単な説明 コーディング例 justify（両端揃え）cssだと上手くいかない なぜなら、justifyが横幅よりも少ない文字列の右端を揃えるという趣旨ではないからです。 table.company th, table.company td { text-align: justify; text-justify: inter-ideograph; border-right: #ccc 1px solid; border-bottom: #ccc 1px solid; padding: 10px; } 自作jQueryの場合 table.company2 th, table.company2 td { text-align: just
フォームで使える！inputにfocusを当てると文字を全選択するjQueryコード | [ゆめみち]
どーもです。WEB屋の岸本です。 最近、もっぱら業務アプリを作っています。 PHP+jQueryで作っているわけなんですが、 ブラウザはIEではなくGoogleChromeを使ってもらってます。 両者はJavaScriptまわりの挙動がだいぶ違うんですね。 「inputにfocusを当てると文字を全選択」ってのをググったら、 意外とないので記事にしときます。すごく簡単です。 jQueryコード $(function(){ $('input[type=text]').live('click',function(){ $(this).select(); }); }) 【解説】 focusじゃないんですねー。clickイベントを拾うんですね。 実装例 <input type="text" value="生ビール飲みたい！"/> <script src="jquery.min.js"><
input要素をクリックすると中のテキストを全部選択出来る
Result focusではなく、mouseupを使うと、「マウスが離れた後」の処理になるので全選択の状態を維持できる。 jQuery//マウスが離れたら選択する $('.new').live('mouseup', function() { $(this).select(); });html<input value="bar" class="new">
HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」 | ClockMaker Blog
Flashでよく見かけるテキストシャッフル演出(文字列がランダムで切り替わる演出、正しい呼び名はわかりませんｗ)をHTML5で作ってみました。HTMLのタグ(pタグとか)に使うバージョンと、HTML5の新要素Canvasを使うバージョンの二種類を用意しました。 【2017年4月26日 追記】 【重要】JSライブラリーはGitHubで更新しています。使用したい方は次のGitHubのリポジトリを御覧ください。 Canvas版はCreateJS 2015年版でも動作するよう更新しました。 デモ demo (HTMLエレメント版) demo (Canvas版) ソースコードはMITライセンスで公開してしますので、個人・商用問わずご自由にお使いください。 ShuffleText.js (HTMLエレメント版) ShuffleEaselText.js (Canvas版) それでは以下で使い方を紹介して
FlashCS6+で生成したスプライトシートをjQueryでロードする実験（前編） - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 結構前の話ではありますが、FlashはCS6から、アニメーションを「スプライトシート」として書き出す機能が実装されています。 これはCreateJS等で簡単に再生出来る様になる便利な機能ですが、 今回はこのスプライトシートをjQueryで再生してみようというお話です。 スプライトシートってなに スプライトシートは、CSSスプライトを利用したアニメーションテクニックです。 アニメーションの全フレームを一つの画像に並べて配置し、 要素の背景画像として埋め込んで background-position を変更していくことで パラパラ漫画のようなアニメーションを再生します。概要はこんな感じ。 一年程前、CS6が出るちょっとだけ前に似たような記事を書いたことがありました。 シンプルなスプライトアニメーションライブラリ 「MovieCrop
jQueryでアコーディオンを設定する際の注意
jQueryでアコーディオンを設定する際の注意 ネタ元：jQuery.js トピックのしつもんの89 アコーディオンを設定する際に動作がカクカクすることがあります。 サンプル この対応方法はアニメーションを設定したい要素にCSSなどでheightを与えてあげれば大丈夫です。 高さが可変でCSSでheightを設定できない場合は以下のようなコードを追加します。 $("dl dd").each(function(){ $(this).css("height",$(this).height()+"px"); }); サンプル アニメーションを設定する場合はheightを指定、これ重要です。 リキッドレイアウトの場合 リキッドレイアウトの場合heightを固定してしまうとウィンドウサイズを小さくした場合、ウィンドウが拡張されませんね。 その場合は以下のclickイベントの最初で高さを指定しておき
jQuery Cycle Plugin | Webサイト制作支援 | ShanaBrian Website
jQuery Cycle Pluginの使用方法をご紹介します。 jQuery Cycle Pluginは様々な効果でスライドショーを簡単に実装できるjQueryライブラリです。 公式サイト ※ このライブラリは、jQueryが別途必要です。 目次 ダウンロードと設置 JavaScriptの読み込み 適用方法 オプションの設定 ページネーションの設置方法 オプション 効果一覧 ダウンロードと設置 こちらからダウンロードします。 ダウンロードしたJavaScriptファイルを任意の場所に設置します。 JavaScriptの読み込み 任意の場所に設置したjQueryとjQuery Cycle PluginのJavaScriptファイルを読み込みます。 パスは環境に応じて変更してください。 HTML <script src="js/jquery.min.js" type="text/javasc
jQuery の Cycle で、ページ番号で切り替えるスライドショー
jQuery の Cycle プラグインを使い、フェードイン・フェードアウトのアニメーションで切り替わるスライドショーにおいて、スライド画像をページ分けし、ページ番号で切り替えられるようにする方法。スライド画像をページ分けし、ページ番号で切り替えられるようにするには、pager オプションを使う。フェードイン・フェードアウトのアニメーションで切り替えるようにするには、fx オプションに「fade」を指定する。 実装例（サンプル） 実装例（サンプル）の動作について 「1」から「5」までのページ番号をクリックすると、フェードイン・フェードアウトのアニメーションで、クリックしたページの画像を表示する。 フェードイン・フェードアウトのアニメーション動作時間は、１秒。 実装例（サンプル）のソースコード 読み込み パスは、それぞれ、アップロードした場所を指定する。 <script type="text
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年10月時点の調査。
ページ内スクロール。アンカーのように”id”を指定するだけです。 | Memorandum Book - written by Ravenala
前回のメモ、「ページ上部にスクロールしながら戻る。」の拡張版です。 ページ内のアンカーへの移動は、一瞬で位置が切り替わることもあり迷子になる可能性がありました。なので、あまり好んで使用はしてこなかったのですが、スクロールしながら指定位置（アンカー）まで移動ができるのであれば迷子も少なくなるのではないかと思い調べてみました。 先にサンプルを見た方が早いので説明はその後にどうぞ。 Sample html <div class="menu left"> <ul> <li><a href="#0">top "#0"</a></li> <li><a href="#1">Anchor "#1"</a></li> <li><a href="#2">Anchor "#2"</a></li> <li><a href="#3">Anchor "#3"</a></li> <li><a href="#4">Anc
読み込むだけでページ内リンクをスクロールするjQueryプラグイン
2010年2月21日 ページ内リンクをスムーズスクロールさせるjQueryプラグインを作ってみた。 今あるサイトに読み込むだけの簡単設計 巷にありふれている、ページ内リンクをスクロールさせるための、jQueryプラグインです。正直、「新しく作る必要なくね？」な印象は拭えません。 しいて言えば、今あるサイトに読み込ませるだけでページ内リンクが自動でスクロールするようになるため、初心者にやさしい設計だということです。 あと、最後に言い残すこととしては、「これなら自分にも作れそう」・・・と、思うことって、最初の一歩を踏み出すのにすごく大切なことだと思う。ってことだけです。 DOWNLOAD - jquery.scroller.d5.js サンプル このサイトでも使用しているので、このページのフッターにある「このページの先頭へ」というリンクで動作が確認できます。 簡単な使い方 <script ty
亚洲成av 人片在线观看无码,日本道精品一区二区三区,免费观看性行为视频的网站,亚洲 日韩 欧美 综合 另类
亚洲成av 人片在线观看无码,日本道精品一区二区三区,免费观看性行为视频的网站,亚洲 日韩 欧美 综合 另类,国产精品福利日韩av在线播放,免费人成在线观看网站体验站,男人扒开添女人下部免费视频
div要素をリンクに変えるjavascript 『jquery.biggerlink』
こんにちは、デザイナーの川本です。 今回は、aタグを設定した親要素にもaタグとhover要素を設定する『jquery.biggerlink』というjavascriptを紹介します。 方法は、javascriptを導入し、div要素にid名を追加するだけです。 Biggerlinkのダウンロードはこちら jQueryのダウンロードはこちら まず、内にダウンロードした必要なjavascriptの場所を記述します。 あとはhtml内のdiv要素にid名を追加します。
jQueryによる要素の存在チェックまとめ
jQueryによる要素の存在チェックまとめです。 jQueryを実行する際、「$(selector)」が成功してjQueryオブジェクトが生成されたことを判断したいケースがあるかと思います。なかったらすいません。 ということで、jQueryで要素（jQueryオブジェクト）が1つでも存在することをチェックする方法を調べてみました。実際に動かした結果でまとめてます。 サンプルはscript要素で括ってますが、必要に応じて「$(function(){ ... });」などで括ってください。間違った情報・表現等がありましたら適宜修正しますのでご指摘ください。 １．$(selector)[0] 「$(selector)」で生成されるjQueryオブジェクトは配列のように扱える（配列の基本メソッドが使える訳ではない）ので、0番目の要素をチェックすることで存在チェックを行えます。 <script> i
jQuery版LightBoxプラグイン « jQueryプラグイン帳
jQueryと同じく、JavascriptライブラリであるPrototypeを使用して作られたLightBox2.0のjQuery版といえるプラグインです。 もし「LightBox2.0」を使用するためだけにPrototypeを使用している方が居たらこの機会にjQueryへ移行するのもいいかもしれません。 最近では「Prototypeライブラリ」より「jQueryライブラリ」を使用しているほうが多くなっているようですし(´∀｀) 表示サンプルはこちら→jQuery lightbox実行サンプル 設置方法・使い方 設置方法・使い方を説明します。 セッティング まずはこちらのファイルをダウンロード＆解凍してください。→ こちら 次に、ダウンロードフォルダ内の下記のファイルをサーバーへアップします。 ・Jsフォルダ内 ├jquery.js（←すでにjQuery本体を読み込んでいるサイ
スクロールで背景画像を別々に動かすパララックス効果
通常背景画像は記事を下にスクロールすると一緒に移動するか、もしくは背景画像が固定された状態でしか設定できません。しかしJQueryを使うと背景画像が横、斜めなど好きな方向に動かすことができます。 今回は、パララックス効果のある2種類のサンプルとコードを紹介します。 スクロールすると雲の背景画像が横に動く 元のコードはアメブロのデザイン「気球に乗って」のコードを元に少アレンジして紹介してあります。 サンプルを見ていただけば分かるとおりスクロールすると雲の背景画像が横に動きます。 背景画像を設置する要素名(id名やclass名)はサイトによって異なると思いますのでそれに合わせて要素名(id名やclass名)は変更してください。 このサンプルでは縦方向は0pxにしてあるので横方向のみ移動していきます。 スクロールすると背景が右に2pxづつ移動します。 htmlコード htmlのコードは記事の外側
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JQuery版smartrollover.jsを作成しました | ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
