Ajax,Javascript、コンテンツを効果的に表現するスクリプトサンプル設置方法
テキスト
jquery.textgrad0.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>テキストをグラデーション表示する</title>
<script src="jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="jquery.textgrad0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#sample1').textgrad({type:'_',begin:'FF9900',end:'FF0000'});
$('#sample2').textgrad({type:'|',begin:'FF9900',end:'FF0000'});
$('#sample3').textgrad({type:'o',begin:'FF9900',end:'FF0000'});
$('#sample4').textgrad({type:'/',begin:'FF9900',end:'FF0000'});
$('#sample5').textgrad({type:'\\',begin:'FF9900',end:'FF0000'});
}
)
</script>
</head>
<body>
<h1 id="sample1">テキストをグラデーション表示する</h1>
<p id="sample2">
テキストをグラデーション表示する<br>
テキストをグラデーション表示する<br>
テキストをグラデーション表示する<br>
テキストをグラデーション表示する<br>
テキストをグラデーション表示する
</p>
<p id="sample3">
テキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br></p>
<p id="sample4">テキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br></p>
<p id="sample5">テキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br>
テキストにグラデーションをかけるjavascript「Textgradテキストをグラデーション表示する<br></p>
</body>
</html>
テキストを鮮やかなグラデーションで表示することの出来るjquery.textgrad0.js。
ちょっと古いので、jquery1..0系を使用しますが、ページを限定するのなら使い道もあると思います。
グラデーションの種類は５種類から選択でき、開始の色と終わりの色を設定するだけでOKです。
まず jquery-1.1.3.1.pack.js をダウンロードします。
次に jquery.textgrad0.js をダウンロードしてください。
（jquery.textgrad0.js.txtでダウンロードするので、.txt部分を削除してください。）
完了したらそれらをアップしておきます。
アップしたスクリプトを読み込ませます。
<script src="jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="jquery.textgrad0.js" type="text/javascript"></script>
次にグラデーションの設定を書き込みます。
<script type="text/javascript">
$(document).ready(function() {
$('#sample1').textgrad({type:'_',begin:'FF9900',end:'FF0000'});
$('#sample2').textgrad({type:'|',begin:'FF9900',end:'FF0000'});
$('#sample3').textgrad({type:'o',begin:'FF9900',end:'FF0000'});
$('#sample4').textgrad({type:'/',begin:'FF9900',end:'FF0000'});
$('#sample5').textgrad({type:'\\',begin:'FF9900',end:'FF0000'});
}
)
</script>
#sample～の箇所はグラデーションを適用させたい箇所に付けるID名で、
typeはグラデーションタイプ、beginは最初の色、endは終わりの色です。
typeに適用できる種類は以下のものがあります。
_ … 左から右
| … 上から下
o … 放射状
/ … 左下から右上（たぶん）
\\ … 左上から右下（恐らく）
最後の\\はバックスラッシュエスケープしちゃうのでそれを回避するための記述です。
ここまでの設定ができれば、後はグラデーションを適用させたい箇所にID名を付けるだけです。
<h1 id="sample1"> テキストをグラデーション表示する </h1>
カラーを設定するとき、”＃”は要らないので気をつけてください。
SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。
画像表示
コンテンツ表示
ナビゲーション
ユーザー補助
その他
