jQuery Plugins by Takodo
since 2011
要約 このプラグインについて
目的 テロップ 文字列を流して表示します。
文字列を、上下、左右へ流して表示します。
特徴は、流す文字列の一部に色を付けるなどの装飾ができます。
上下、左右好みの方向へ流すことができます。
画像を表示するためのポップアップ画面の中へも容易に流すことができます。
■rbこのプラグインが記載されているスクリプト
jqSlideTitl.js
■ ■rbプラグイン名
jqTerop();
■
特徴は、流す文字列の一部に色を付けるなどの装飾ができます。
上下、左右好みの方向へ流すことができます。
画像を表示するためのポップアップ画面の中へも容易に流すことができます。
■rbこのプラグインが記載されているスクリプト
jqSlideTitl.js
■ ■rbプラグイン名
jqTerop();
■
使い方
<head></head>で、必要なライブラリを読み込みます。 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> <script src="/commondata/jscommon/jqSlideTitl.js" type="text/javascript"></script> ■cmnt1 テロップを表示したい箇所へID名を付けてDivを記載するだけです。 //このDivの中に記載されます。表示したい箇所に定義します。//このDivの内容がテロップで表示されます。 (function($){ jQuery.fn.jqShowSrcCode=function(options){ ･････････････････ ･････････････････■
(function($){
jQuery.fn.jqShowSrcCode=function(options){
var defaults = {
titleCss:{ //タイトル
'color':'#2e3eaf',
'border-color':'#111111',
'border-width':'1px 1px 0px 1px'
},
SrcCss:{ //ソース部分
'display':'block',
'border-width':'0px 1px 1px 1px',
'background-color':'#f5f5f1'
}
};
var setting = $.extend(true, defaults, options);
$(this).each(function(){
var src=$(this).html();
return this;
};
})(jQuery);
var defaults = {
titleCss:{ //タイトル
'color':'#2e3eaf',
'border-color':'#111111',
'border-width':'1px 1px 0px 1px'
},
SrcCss:{ //ソース部分
'display':'block',
'border-width':'0px 1px 1px 1px',
'background-color':'#f5f5f1'
}
};
var setting = $.extend(true, defaults, options);
$(this).each(function(){
var src=$(this).html();
return this;
};
})(jQuery);
サンプル
文字列を下から上へ流して表示します。これがデフォルトです。
この表示の使い方がデフォルトです。
使い方も最も簡単です。下記のように特別な設定は必要ありません。
文字列を上から下へ流して表示します。
下の、ｊQueryロゴの上へ文字を流してみました。
jQuery Plugins by Takodo
since 2011
サンプル ポップ枠の中へ流してみました。
ポップ枠の作り方
このサイトの目的は、テロップの流し方なので、ポップ枠についての詳細な説明は、
ポップ枠紹介サイト（まだ作成していない）で、ご覧ください。
ポップ枠作成のためのjavascriptは、下に記載しておきます。
ポップ枠紹介サイト（まだ作成していない）で、ご覧ください。
ポップ枠作成のためのjavascriptは、下に記載しておきます。
ポップ枠の中へ、文字列を右から左へ流して表示します。
大垣の写真。このDivの中にポップアップ枠を作成する。
■/takodo/tripc/110504ogaki/110504_082642-960.jpg■L,120,||城郭図▲
■/takodo/tripc/110504ogaki/110504_083100-960.jpg■R,120,||大垣城由来▲
■/takodo/tripc/110504ogaki/110504_083350-960.jpg■L,120,||荒布多門▲
文字列を右から左へと流します。
小さな写真をクリックすると、このポップアップ画面に表示されます。
大垣の街を観光したときの様子です。
ポップ枠の中へ、文字列を左から右へ流して表示
フジサクラの写真をこのDivの中にポップアップ枠を作成する。
■/takodo/tripc/110429minobu/110430_130600-960.jpg■L,120,||１００Kmマラソンに出会いました。▲
■/takodo/tripc/110429minobu/110430_130654-960.jpg■L,120,||マラソン参加者の多いことに驚き。▲
■/takodo/tripc/110429minobu/110501_085438-960.jpg■L,120,||多くのフジザクラが満開。▲
■/takodo/tripc/110429minobu/110501_085552-960.jpg■L,120,||ツツジと、フジザクラ。▲
■/takodo/tripc/110429minobu/110501_092834-960.jpg■L,120,||道沿いに満開。▲