2014年01月17日 時点の jquery.balloon.js では、jQuery 1.7.2 以降で css に null を設定して動作しませんでしたが、2ケ月後に 0.5.1 として更新されて正しく動いています( css に null が設定できる ) css に null を設定してしまうので、文字列のセンタリングは classname に設定する クラスで設定する事になります。![]()
オリジナルページで既に、画像を使ったバルーンが動作しません(jQuery 1.7.2 以降)。css に null をセットできなくなっているので必要な値をセットします。
▼ カーソルを上に置いて下さい
jQuery のキー位置をかな入力すると
<script> if ( !window.jQuery ) { document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></"+"script>"); } </script> <script> if ( !window.jQuery.balloon ) { document.write("<"+"script src=\"http://winofsql.jp/js/jquery.balloon.min.051.js\"></"+"script>"); } </script> <style type="text/css"> .orange_balloon { background: url(http://winofsql.jp/js/balloon/orange_balloon.png) center center no-repeat; width: 323px; height: 278px; line-height:290px; font-size: 45px; font-weight: bold; text-align: center; } </style> <script type="text/javascript"> $(function() { $('#matanaisun').balloon( { position: "right", tipSize: 20, css: { opacity: "1", color: "#000", fontSize: "80px", borderRadius: "30px", border: "solid 5px #222", } } ); $('#matanaisun2').balloon( { tipSize: 0, offsetY: -290, offsetX: 100, classname: "orange_balloon", css: null } ); }); </script> <pre> <span id="matanaisun" title="またないすん"> jQuery のキー位置をかな入力すると </span> ■ <a id="matanaisun2" title="こんな感じ" href="http://urin.github.io/jquery.balloon.js/" target="_blank">画像を使った自由なふきだし(Excelで簡単)作って、背景画像に指定しました</a> </pre>
▼ 文字にマウスカーソルを合わせるとこうなります※ jquery.balloon.js を使っています ▼ カーソルを上に置いて下さい( 画像が表示されます ) ■ 画像を使った自由なふきだし(Excelで簡単)作って、背景画像に指定しました 関連する記事
|
【jQueryの最新記事】
- clipboard.js で、2種類のクリップボード処理オブジェクトを作成して使い分ける
- 一般的な PHP のアップロードページに対して jQuery の $.ajax でファイルをアップロードする
- jQuery の $.ajax で JSON 文字列を WEB より取得して TABLE を作成する
- jQuery で DIV の中の DIV を縦横中央に配置する
- jQuery で ページ内の画像のリンク切れを探してテーブルに URL を表示する
- クリックした入力フィールド以外をブラックアウトする jQuery プラグイン
- FORM の内容を localStorage に保存する jQuery プラグイン
- tableMagic : 単純に JSON から TABLE、TR、TH、TR、TD を作成する jQuery のプラグイン
- 滑らかなスクロール(scroll bar)を提供する jQuery プラグイン jQuery.NiceScroll
- jQuery : F1 キーでヘルプを起動させないようにする
- jQuery プラグイン jquery.balloon.js に jQuery UI を追加してバルーン毎に違ったアニメーション効果を設定する
- jquery.balloon.js で、balloon をメッセージ表示に使う( ゲーム等で使う為 )
- jQuery プラグイン jquery.balloon.js で複数バルーンにそれぞれ別のコンテンツを設定する為には、.each を使う
- jQuery プラグイン jquery.balloon.js の外部からのコントロール
- NAVER : Image*After の城と教会編
- 親(parent) フレームに jQuery が無い場合に jQuery をインストールする。
- jQuery で書かれた、幻想的な動く星座のようなシーン
- jQuery の addClass で、CSS で作成するサイフの出来上がる過程を見れるようにしました
- jQuery/JavaScript でフルスクリーンAPI( スクロールしないし、こりゃあ、WebGL の為にあるような・・・ )
- CSS transition : jQuery の addClass と removeClass で変化を付ければいい。いや、これが一番よさそうだ。