TOP /すぐに使えるJavaScript | グラデーション文字 |
---|
簡単に文字にグラデーションを掛けます
1つのScriptでいくつでもグラデーション文字を作れます。
Gradient("ID名","左の色(16進数)","右の色(16進数)");<span id="grad1">簡単に文字にグラデーションを掛けます</span><br> <span id="grad2">1つのScriptでいくつでもグラデーション文字を作れます。</span><br> <script type="text/javascript"><!-- Gradient("grad1","#ff00ff","#00aaff"); Gradient("grad2","#00ff00","#cc00ff"); // --></script>
<script type="text/javascript"><!-- function Gradient(gradient_elm,cstart,cend){ gradient_temp=document.getElementById(gradient_elm).innerHTML; gradient_n=gradient_temp.length; gradient_str=""; start_r=Number(("0x"+cstart.substring(1, 3)).toString(10)); start_g=Number(("0x"+cstart.substring(3, 5)).toString(10)); start_b=Number(("0x"+cstart.substring(5, 7)).toString(10)); end_r=Number(("0x"+cend.substring(1, 3)).toString(10)); end_g=Number(("0x"+cend.substring(3, 5)).toString(10)); end_b=Number(("0x"+cend.substring(5, 7)).toString(10)); g_r= Math.floor((start_r-end_r)/gradient_n); g_g= Math.floor((start_g-end_g)/gradient_n); g_b= Math.floor((start_b-end_b)/gradient_n); for(i=0;i < gradient_n; i++) { if(gradient_temp.charAt(i)=="<")return; if(start_r-g_r*i<0)temp_r=0; else if(start_r-g_r*i>255)temp_r=255; else temp_r=start_r-g_r*i; temp_r=temp_r.toString(16); if(temp_r.length==1)temp_r="0"+temp_r; if(start_g-g_g*i<0)temp_g=0; else if(start_g-g_g*i>255)temp_g=255; else temp_g=start_g-g_g*i; temp_g=temp_g.toString(16); if(temp_g.length==1)temp_g="0"+temp_g; if(start_b-g_b*i<0)temp_b=0; else if(start_b-g_b*i>255)temp_b=255; else temp_b=start_b-g_b*i; temp_b=temp_b.toString(16); if(temp_b.length==1)temp_b="0"+temp_b; gradient_str+=gradient_temp.charAt(i).fontcolor("#"+temp_r+temp_g+temp_b); } document.getElementById(gradient_elm).innerHTML=gradient_str; }/*himajin.moo.jp*/ // --></script>