とても短いコードですが、「ええ・・・と」となりそうな内容なので。 JavaScript
var color_code = "#123456";
alert(parseInt(color_code.replace("#","0x")))
var color_num = 1193046;
alert("#"+color_num.toString(16));
VBScript
color_code = "#123456"
MsgBox Clng(Replace(color_code,"#", "&H") )
color_num = 1193046
MsgBox("#" & Hex(color_num))
CLng 関数
400 x 400 の四角形なので、200 で円になると思ったら、太さのぶんを 指定した値から引いて半径にしているような感じです。 IE9 でまだテストできていません。 Opera はアニメーションしませんでした。▼ このコードをソースコードから実行してみる
<style type="text/css">
#my_box_radius {
width:400px;
height:400px;
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
transition: all 5s ease;
border:40px #000 solid;
}
</style>
<script type="text/javascript">
function my_action_radius() {
var obj = document.getElementById("my_box_radius");
obj.style.borderRadius = "240px";
}
</script>
<input type="button" value="実行" onclick="my_action_radius();">
<div id="my_box_radius"></div>
以下は、margin に対して指定してみたのですが、効果は太さと色に対して 現れますが、スタイルはすぐ変更されます。ただ、サイズが変更されるに従 って、点線が動く事になります。
Firefox と Chrome で点線の動き方が違います。 ※ Firefox のほうが望ましい動きをします
jQuery の .text や .html は動作としては、.val と同じですが、.text も .html も
開始タグから終了タグまでの内容を取りだしたり設定したりします。
ただ、それぞれ用途が違うので注意が必要ですが、text('値') で、HTML 上で表示したい
HTML のコードを設定して、.html() で取り出すと、文字列としては特殊文字として取得
する事ができます。
ですから、それを再度 .text('値') で設定すれば、HTMLエンティティを表示する事ができ
ます
※ 逆に、.html('値') で HTML のソースコードを設定して、.text() で取り出すと、HTML
※ 部分が取り除かれた文字列になります。
<script type="text/javascript">
// < > & を < > & に変換
function action3() {
$('#cnv').text('<b>強調</b> a <= 1 &&');
$('#result').val( $('#cnv').html() );
// textarea は、val でも text でも良い。
// $('#result').text( $('#cnv').html() );
}
</script>
<input type="button" value="実行" onclick='action3();' />
<br />
<div id="cnv" style='display:none'></div>
<textarea id="result" style='width:300px;height:100px;'></textarea>
<input type='button' value='BODY文字列を取得' onclick='alert($("body").text());'/>
デフォルトでは swing と linear ですが、jQuery Easing Plugin でたくさん使えるようになります。但し、swing は jswing に名前が変更されて、swing は書けるようですが、jQuery.easing.def を変更すると out of memory のエラーが 出たりするので、デフォルトである easeOutQuad は、swingと殆ど同じなのであまり気にせずに使うといいと思います。 ※ しかし、どうも out of memory の挙動(IE8ですが)がたまにあるので、無理に ※ プラグインしない、という選択肢もあります。 その効果をグラフで示しておられるのが jQuery Easing - jQuery 日本語リファレンスで、その意味かよく解るようになっています。このページの jQuery は、jquery-1.3.min.js でしたが、1.6.2 でも動いています。 ( そもそも、easing はプラグインなので、影響無いように作られています )テフォルトの easing
<script>
if ( !window.jQuery ) {
document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
</script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<input type="button" value="アニメーション" onclick='jqAction()'>
テフォルトの easing <input id="def" type="text" />
<div style='position:relative;height:150px;'>
<img
id="target"
src="http://lightbox.on.coocan.jp/image/webtoolbox_gb.png"
width="442"
height="121"
style='
position: absolute;
left: 10px;
'
/>
</div>
<script type="text/javascript">
// デフォルトは easeOutQuad
// ※ swing とほぼ同じ効果
$('#def').val(jQuery.easing.def);
function jqAction() {
$('#target').animate(
{
// あるものを 0 にしたり、無いものを元に戻します
// ( いったん見えなくなります )
opacity: ['toggle', 'easeInCubic'],
width: ['-=200', 'easeInElastic']
},
1000,
function() {
// 見えなくなった後、元へ戻します
$('#target').animate(
{
opacity: 'show',
width: '+=200'
},
1000,
function() {
// 一番最後に表示
$('#def').val(jQuery.easing.def);
}
);
}
);
}
</script>
対象となるエレメントの定義が済んでおれば、それより以降の位置で SCRIPT 要素で処理を書く事によって「初期値設定」が可能ですが、どうしてもエレメントの定義前に初期値設定の記述をしたい場合は、onload イベントを使う事になります。しかし、自分で書くとこれは結構面倒です。 そこで、jQuery では $( 関数 ); と書く事になるのですが、関数を事前定義するのも面倒なので、無名関数で処理を書いてしまいます。
<script>
if ( !window.jQuery ) {
document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
if ( window[window.location.hostname+'.loadjQueryUI'] !== true ) {
window[window.location.hostname+'.loadjQueryUI'] = true;
document.write("<"+"link rel=\"stylesheet\" href=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css\">");
document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js\"></"+"script>");
}
</script>
<script type="text/javascript">
// 初回の値
$( function() {
$( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) + "%" )
}
);
</script>
<div style='margin: 0 0 5px 0;'>指定率 :
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</div>
<div style='height:50px;'>
<div id="slider-range-min" style='width:200px;'></div>
</div>
<script type="text/javascript">
$( "#slider-range-min" ).slider({
range: "min",
value: 60,
min: 0,
max: 100,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value + "%" );
}
});
</script>
jQuery の英文マニュアル : .animate() – jQuery API ページのサンプル (Basic Usage)をもう少し解りやすく変更したものです。二つ以上の効果を同時実行( 数値プロパティに対して )All animated properties should be animated to a single numeric value, プロパティは数値である事。 width, height, or left can be animated but background-color cannot be. 幅や高さや位置情報はアニメーションできるが、背景色は不可 Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable. 通常は、ピクセルが利用されるが、em や % も利用可能 In addition to style properties, some non-style properties such as scrollTop and scrollLeft, as well as custom properties, can be animated. CSS で無い scrollTop と scrollLeft は動作します Shorthand CSS properties (e.g. margin, background, border) are not supported. margin, background, border のような一度に複数指定できるものは サポート外 In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element. 数値プロパティでは、show、hide、toggle が利用可能。 Animated properties can also be relative. If a value is supplied with a leading += or -= sequence of characters += と -= で現在の値よりの相対指定が可能と、だいたいを読んで以下のサンプルで試しています。100% 使うと、DIV 枠に 適合するようなサイズになったりします
<script>
if ( !window.jQuery ) {
document.write("<"+"script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></"+"script>");
}
</script>
<input type="button" value="アニメーション" onclick='jqAction()'>
二つ以上の効果を同時実行( 数値プパティに対して )
<div style='position:relative;height:150px;'>
<img
id="target"
src="http://lightbox.on.coocan.jp/image/webtoolbox_gb.png"
width="442"
height="121"
style='
position: absolute;
left: 10px;
'
/>
</div>
<script type="text/javascript">
function jqAction() {
$('#target').animate(
{
// あるものを 0 にしたり、無いものを元に戻します
// ( いったん見えなくなります )
opacity: 'toggle',
width: '-=200'
},
2000,
function() {
// 見えなくなった後、元へ戻します
$('#target').animate(
{
opacity: 'show',
width: '+=200'
},
2000
);
}
);
}
</script>
<input type="button" value="フェードアウト/フェードイン" onclick='jqAction2()'>
<div style='position:relative;height:150px;'>
<img
id="target2"
src="http://lightbox.on.coocan.jp/image/webtoolbox_gb.png"
width="442"
height="121"
style='
position: absolute;
left: 10px;
visibility: "visible"
'
/>
</div>
<script type="text/javascript">
function jqAction2() {
// 見えなくなくなります
$('#target2').fadeOut(
2000,
function() {
// 見えなくなった後、元へ戻します
$('#target2').fadeIn(2000);
}
);
}
</script>
If the easing argument is not defined, the default swing function is used. easing は、アニメーションのパターンですが、通常ライブラリでは、swing と linear のみのようで、増やしたい場合は プラグインを使用する必要があるみたいです。デフォルトは、swing になり、animation ではプロパティ毎に配列で easing を指定できると書いてあります。 width: ['toggle', 'swing'] こんな感じですね 関連する記事 jQuery の easing の追加
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。 Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。 また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。 ※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです 対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。※ エキスパートモードで表示しています アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
<% if:page_name eq 'archive' -%> アーカイブページでのみ表示される内容 <% /if %> <% if:page_name eq 'category' -%> カテゴリページでのみ表示される内容 <% /if %> <% if:page_name eq 'tag' -%> タグページでのみ表示される内容 <% /if %>この記述は、以下の場所で使用します
|
|
